/* ========================================================================== LearnEU — the marketing site. Separate from the app's stylesheet on purpose. The app is a phone-shaped, full-height, single-screen thing; this is a page you scroll. Sharing one stylesheet between them would mean every layout rule here carrying an exception for the app, and the reverse. What the two *do* share is the palette, and only the palette, mirrored below. No build step and no external assets, same as the app — this deploys as static files to OVH and must work with nothing but a web server. ========================================================================== */ /* ------------------------------------------------------------- the palette */ /* Mirrored from ../../css/styles.css. If you change a brand colour there, change it here too — these are the tokens the app's own screenshots carry, so drift shows up as a page that does not match the product in its own images. Only the tokens this page actually uses are copied; the feedback greens and reds belong to answering a question and have nothing to say on a landing page. */ :root { --eu-blue: #003399; --eu-blue-dark: #00256e; --eu-blue-light: #2a5fd0; --eu-gold: #ffcc00; --gold-bg: #fff6d6; --gold-text: #7a5c00; --blue-bg: #eaf0fd; --blue-text: #1e46a0; --bg: #ffffff; --surface: #ffffff; --raised: #f7f9fc; --text: #14202e; --muted: #6b7a8d; --border: #dde3ec; --border-strong: #c3ccda; --radius: 14px; --shadow-btn: 0 3px 0; --font: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; /* Page-only. The app never needs a measure or a section rhythm because it never shows a column of prose this wide. */ --measure: 68ch; --page: 1080px; --gap: clamp(1rem, 3vw, 2rem); } @media (prefers-color-scheme: dark) { :root { --bg: #10161f; --surface: #161e2a; --raised: #1c2534; --text: #eaf0f8; --muted: #93a3b8; --border: #2a3547; --border-strong: #3a4761; --eu-blue-light: #5a8ae8; --gold-bg: #32290f; --gold-text: #ffd75e; --blue-bg: #16223a; --blue-text: #9dbcf8; } } * { box-sizing: border-box; } html { /* Anchor links from the nav land under the sticky header without this. */ scroll-padding-top: 5rem; } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* Headings hyphenate, which matters only once the page is translated. English headings are made of short words and wrap wherever they like. German ones are not: "Nutzungsbedingungen" is a single unbreakable 19-character run that, at the h1 size on a 320px phone, is wider than the screen — and a heading that overflows takes the whole document's width with it, so every other line on the page gets a horizontal scrollbar. `hyphens: auto` needs the language to be declared to know where the breaks go, which is exactly what tools/build_site.py writes into . `overflow-wrap` is the fallback for a language the browser has no hyphenation dictionary for: an ugly break beats a sideways page. */ h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.5em; overflow-wrap: break-word; hyphens: auto; } h1 { font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 800; } h2 { font-size: clamp(1.5rem, 4vw, 2.125rem); font-weight: 800; } h3 { font-size: 1.125rem; font-weight: 800; } p { margin: 0 0 1em; max-width: var(--measure); } a { color: var(--eu-blue-light); } ul { max-width: var(--measure); } /* One focus ring for the whole site, matching the app's reasoning: keyboard users can always see where they are, tapping does not leave a ring behind, and the ring turns gold where blue would vanish into a blue button. */ :focus-visible { outline: 3px solid var(--eu-blue-light); outline-offset: 2px; border-radius: 4px; } .btn-primary:focus-visible, .site-head :focus-visible { outline-color: var(--eu-gold); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gap); } /* ---------------------------------------------------------------- the head */ .site-head { position: sticky; top: 0; z-index: 10; background: var(--eu-blue); color: #fff; } .site-head .wrap { display: flex; align-items: center; gap: 1rem; min-height: 4rem; } .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.15rem; color: #fff; text-decoration: none; margin-right: auto; } .brand svg { width: 32px; height: 32px; border-radius: 8px; display: block; } .site-head nav { display: flex; gap: 1.25rem; } .site-head nav a { color: #fff; text-decoration: none; font-weight: 700; font-size: 0.95rem; opacity: 0.9; } .site-head nav a:hover { opacity: 1; text-decoration: underline; } /* ------------------------------------------------------- the language picker */ /* Four two-letter codes, boxed, so they read as a control rather than as four more section links sitting beside Features and Pricing. It is the one piece of header furniture that survives the narrow breakpoint below. The section links are shortcuts to content the visitor can reach by scrolling; this is the only route to a page they may not be able to read. */ .site-head nav.lang-switch { gap: 0.25rem; margin-left: 0.5rem; } .site-head nav.lang-switch a { font-size: 0.8rem; letter-spacing: 0.04em; padding: 0.25rem 0.45rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.28); opacity: 0.75; } .site-head nav.lang-switch a:hover { opacity: 1; text-decoration: none; background: rgba(255, 255, 255, 0.12); } /* The current language is a link to the page you are on, so it is styled as a state rather than as a destination. aria-current carries the same fact to a screen reader, which is why nothing here needs to be read out. */ .site-head nav.lang-switch a[aria-current="page"] { opacity: 1; background: var(--eu-gold); border-color: var(--eu-gold); color: var(--eu-blue); } /* Below 560px the three nav links crowd the wordmark off its own line. They all point at anchors further down a page the visitor is already scrolling, so dropping them costs nothing a scroll does not already give. The language picker stays: scrolling does not translate anything. */ @media (max-width: 560px) { .site-head nav:not(.lang-switch) { display: none; } .site-head nav.lang-switch { margin-left: auto; } .site-head nav.lang-switch a { padding: 0.25rem 0.35rem; } } /* -------------------------------------------------------------- the hero */ .hero { padding-block: clamp(2.5rem, 8vw, 5rem); background: radial-gradient(1200px 400px at 50% -10%, var(--blue-bg), transparent 70%); } .hero .wrap { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 860px) { .hero .wrap { grid-template-columns: 1.1fr 0.9fr; } } .hero p.lead { font-size: 1.2rem; color: var(--muted); } .eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); background: var(--gold-bg); padding: 0.35rem 0.7rem; border-radius: 999px; margin-bottom: 1rem; } /* --------------------------------------------------------------- buttons */ .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .btn { display: inline-block; padding: 0.85rem 1.4rem; border-radius: var(--radius); font-weight: 800; text-decoration: none; transition: transform .06s ease, filter .12s ease; } /* The 3px drop-shadow-as-ledge and the press that removes it are the app's button, kept so the site and the product feel like one thing. */ .btn:active { transform: translateY(3px); box-shadow: none !important; } .btn-primary { background: var(--eu-blue); color: #fff; box-shadow: var(--shadow-btn) var(--eu-blue-dark); } .btn-ghost { background: transparent; color: var(--text); border: 2px solid var(--border-strong); } .btn-ghost:hover { border-color: var(--eu-blue-light); } .note { font-size: 0.9rem; color: var(--muted); margin-top: 0.9rem; } /* The languages, in the hero, under the call to action. Boxed and tinted rather than set as another paragraph of lead text: someone scanning the page in their third language needs to find this in a second, and a rule down the side is what makes it findable without making it shout. */ .langs { margin-top: 1.5rem; padding: 0.85rem 1rem; border-left: 3px solid var(--eu-gold); border-radius: 0 var(--radius) var(--radius) 0; background: var(--blue-bg); font-size: 0.95rem; max-width: var(--measure); } .langs b { color: var(--eu-blue-light); } /* Sits under the three screenshots and says, in the language being read, that the pictures are of the English build. Without it a French visitor has to guess whether the app is translated or only the page is. */ .shots-note { text-align: center; margin-top: 1.75rem; } /* "The English version prevails", on the translated legal pages only. Italic and muted because it is a note about the document rather than a term of it. */ .legal-note { font-style: italic; } /* --------------------------------------------------------------- the numbers */ /* Four across on a wide screen, two-by-two once that would squeeze the largest figure ("1,075") into wrapping. auto-fit rather than a breakpoint: the widest cell is the one that decides, and that changes with the language. */ .numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .numbers div { background: var(--surface); padding: 1.25rem 0.75rem; text-align: center; } .numbers b { display: block; font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 800; color: var(--eu-blue-light); } .numbers span { font-size: 0.85rem; color: var(--muted); } /* --------------------------------------------------------------- the shots */ /* A phone-shaped frame around a screenshot. The ratio is the viewport tools/screenshots.sh photographs — 390×844 CSS pixels — and not a rounded-off 9/19, because the frame is what decides the height of the hero before the image has loaded. A frame a shade the wrong shape either crops a row of pixels off the app or leaves a seam of frame showing along one edge, and both look like a mistake at the exact moment the page is trying to look like a product. */ .shot { aspect-ratio: 390 / 844; /* The ratio has to describe the screen, not the screen plus the bezel: with border-box the 8px frame eats into it and `cover` shaves a few pixels off each side of the app. */ box-sizing: content-box; margin-inline: auto; width: min(100%, 300px); border: 8px solid var(--border-strong); border-radius: 32px; background: var(--raised); overflow: hidden; display: grid; place-items: center; } .shot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The gallery. `auto-fit` rather than a fixed three columns: the phones are already narrow, and one that has to shrink below about 200px stops being readable — better that it wraps onto its own row. */ .shots { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .shots figure { margin: 0; } .shots figcaption { margin: 1rem auto 0; max-width: 22rem; font-size: 0.92rem; color: var(--muted); text-align: center; } .shots figcaption b { color: var(--text); } /* --------------------------------------------------------------- sections */ section { padding-block: clamp(2.5rem, 7vw, 4.5rem); } section.tint { background: var(--raised); } .section-head { max-width: var(--measure); margin-bottom: 2rem; } .section-head p { color: var(--muted); margin: 0; } .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } .card p { margin: 0; color: var(--muted); font-size: 0.97rem; } .card .icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-bg); color: var(--blue-text); font-size: 1.2rem; margin-bottom: 0.75rem; } /* ---------------------------------------------------------------- pricing */ .price-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 760px; } .plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; } .plan.featured { border: 2px solid var(--eu-blue); } .plan .amount { font-size: 2.25rem; font-weight: 800; } .plan .amount small { font-size: 0.9rem; font-weight: 700; color: var(--muted); } .plan ul { list-style: none; padding: 0; margin: 1rem 0 0; } .plan li { padding-left: 1.6rem; position: relative; margin-bottom: 0.4rem; font-size: 0.97rem; } .plan li::before { content: "✓"; position: absolute; left: 0; color: var(--eu-blue-light); font-weight: 800; } /* -------------------------------------------------------------------- FAQ */ details { border-bottom: 1px solid var(--border); padding: 1rem 0; max-width: var(--measure); } summary { font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; color: var(--muted); font-weight: 800; } details[open] summary::after { content: "−"; } details p { margin: 0.75rem 0 0; color: var(--muted); } /* --------------------------------------------------------------- the foot */ .disclaimer { border: 1px solid var(--border); border-left: 4px solid var(--eu-gold); border-radius: var(--radius); background: var(--gold-bg); color: var(--gold-text); padding: 1rem 1.25rem; font-size: 0.92rem; } .disclaimer p { margin: 0; max-width: none; } .site-foot { border-top: 1px solid var(--border); padding-block: 2rem; color: var(--muted); font-size: 0.9rem; } .site-foot .wrap { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; } /* Wraps, because the labels are translated and German is long: "Privacy · Terms · Contact" is 25 characters and fits anywhere, while "Datenschutz · Nutzungsbedingungen · Kontakt" is 48 and pushed the page wider than a 320px phone until this line said flex-wrap. The row gap is the smaller of the two so a wrapped second line sits close to the first rather than reading as a separate block. */ .site-foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-left: auto; } .site-foot a { color: var(--muted); } /* ------------------------------------------------------- the legal pages */ /* privacy.html and terms.html are one column of prose and nothing else. */ .doc { padding-block: clamp(2rem, 6vw, 3.5rem); } .doc h2 { margin-top: 2rem; font-size: 1.35rem; } .doc h1 + p.note { margin-top: -0.5rem; } .doc li { margin-bottom: 0.4rem; max-width: var(--measure); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }