/* ============================================================ english-site — components specific to this site. Loads AFTER style.css (the shared CTO Teachings theme) and only ADDS; it never restyles a shared component. Keep tokens in style.css. ============================================================ */ /* ============================================================ THE PAGE CANVAS ONE background for the entire site, not a sequence of section fills. This is how the best-ranked marketing sites (Linear, Stripe, Vercel, Framer) treat a dark page: a single continuous surface lit by a few very large, very soft colour fields, so scrolling feels like moving through one room rather than past a row of differently-painted panels. Three layers, all fixed to the viewport so the light stays put while the content travels over it: html pure black floor (the ctoteachings --black) body::before the aurora — four broad radial washes body::after texture — dot lattice + film grain Palette is exactly ctoteachings.com: --purple #7a64ff, the indigo #5b54e8 and pink #ef4e9b from --btn-grad. Nothing new is introduced; only the arrangement is. The grain matters more than it looks. Wide, low-alpha gradients on a near-black background band into visible stripes on 8-bit displays; a little noise breaks that up, and it is the single detail that separates a premium dark canvas from a cheap one. ============================================================ */ /* The floor moves to so body's own pseudo-elements can sit behind body's content at a negative z-index and still be seen. */ html { background: var(--black); } body { background: transparent; } /* ---- Aurora ---- */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: /* violet bloom over the shoulder of the header — the page's key light */ radial-gradient(72% 56% at 6% -8%, rgba(122,100,255,0.42), transparent 70%), /* a warm counterpoint from --btn-grad's pink, kept weak so it reads as temperature rather than as a second colour */ radial-gradient(56% 46% at 97% 6%, rgba(239,78,155,0.22), transparent 72%), /* indigo pooling low, so the eye is pulled down the page */ radial-gradient(74% 60% at 86% 94%, rgba(91,84,232,0.34), transparent 74%), radial-gradient(52% 44% at -6% 90%, rgba(122,100,255,0.18), transparent 72%), var(--black); } /* ---- Texture ---- */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"), radial-gradient(circle, rgba(144,124,255,0.18) 1px, transparent 1.6px); background-size: 160px 160px, 46px 46px; /* strongest behind the upper middle of the viewport, gone at the corners, so the texture never draws a hard edge of its own */ -webkit-mask-image: radial-gradient(118% 88% at 50% 26%, #000 18%, transparent 100%); mask-image: radial-gradient(118% 88% at 50% 26%, #000 18%, transparent 100%); } /* Phones: fewer pixels to composite, and a lattice this fine turns to mush at high DPI anyway. */ @media (max-width: 780px) { body::after { opacity: 0.4; background-size: 160px 160px, 54px 54px; } } /* Sections are transparent windows onto the canvas — no fills, no seams. .bg-pattern survives only as a stacking helper. */ .bg-pattern { position: relative; } .bg-pattern > .container, .bg-pattern > .section-head { position: relative; z-index: 2; } /* The contact page rides the same canvas as every other section. */ .contact-section { position: relative; } /* ============================================================ CONVERSION FURNITURE Patterns taken from the teacher-facing sites that rank for this market (Ellii, Wordwall, Twinkl): one high-contrast primary CTA repeated down the page, real product UI above the fold, short scannable lines instead of paragraphs. ============================================================ */ /* Every call to action on this site is the shared white .btn-pill from style.css, which turns to the --btn-grad gradient on hover. The local .btn-primary (gradient at rest) and .btn-ghost variants that used to live here are gone: the header CTA was the last thing using them, and one button shape repeated down the page beats three competing ones. */ /* Same white pill as the hero CTA, just sized down for the bar, and text-only (the arrow belongs to the in-page CTAs, not the chrome). No glow: the purple drop-shadow belonged to the gradient version and reads as dirt under a white button. .btn-pill already supplies the gradient on hover. */ .header-cta { padding: 14px 24px; font-size: 0.82rem; } /* micro-copy that removes friction directly under a CTA */ .trust-line { color: var(--muted); font-size: 0.92rem; margin: 16px 0 0; } .trust-line strong { color: var(--text); font-weight: 600; } .trust-center { text-align: center; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } /* ---- SPLIT HERO: outcome copy left, working product right ---- The hero rides the shared page canvas like every other section. It used to carry its own drifting word-field backdrop; that is gone with the move to a single background, and it was half-broken anyway (the base .word-field::after scrim and the .wf-new fill were never defined, so the "new" words painted black instead of glowing). The demo card is the hero's visual interest now. */ .hero-split { position: relative; padding: 190px 0 110px; } .hero-split > .container { position: relative; z-index: 2; } .hero-split-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 7px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--purple-light); background: rgba(122,100,255,0.13); border: 1px solid rgba(122,100,255,0.4); } .hero-split h1 { font-size: clamp(2.5rem, 4.6vw, 4.1rem); text-transform: uppercase; line-height: 1.02; margin: 0 0 24px; } .hero-split-sub { color: #e7eaea; font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.5; margin: 0 0 34px; max-width: 560px; } @media (max-width: 980px) { .hero-split { padding: 150px 0 80px; } .hero-split-grid { grid-template-columns: 1fr; gap: 46px; } .hero-split-sub { max-width: none; } } /* ---- PROOF STRIP: hard product facts, directly under the hero ---- */ .proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); } .proof-item { padding: 34px 28px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center; } .proof-item:last-child { border-right: 0; } .proof-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1; margin-bottom: 10px; background: var(--btn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .proof-label { color: var(--muted); font-size: 0.96rem; line-height: 1.4; } @media (max-width: 860px) { .proof-strip { grid-template-columns: 1fr 1fr; } .proof-item:nth-child(2) { border-right: 0; } .proof-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.1); } } /* ---- THREE-STEP PROCESS with a mini product visual per step ---- */ .how3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .how3-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(146,124,255,0.45); border-radius: var(--radius); background: linear-gradient(180deg, rgba(26,22,44,0.7), rgba(12,10,22,0.7)); box-shadow: 0 8px 30px rgba(0,0,0,0.35); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .how3-card:hover { transform: translateY(-6px); border-color: rgba(146,124,255,0.85); box-shadow: 0 16px 44px rgba(90,60,200,0.4); } .how3-step { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--purple); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .how3-head { display: flex; align-items: center; gap: 14px; padding: 26px 26px 0; } .how3-head h3 { font-size: 1.22rem; margin: 0; } .how3-card > p { color: var(--muted); font-size: 1rem; margin: 12px 26px 22px; line-height: 1.5; } /* the mini UI sits flush at the card's bottom edge */ .mini-ui { margin-top: auto; padding: 20px 22px; min-height: 148px; border-top: 1px solid rgba(255,255,255,0.09); background: rgba(4,3,10,0.55); } .mini-row { display: flex; flex-wrap: wrap; gap: 7px; } .mini-chip { padding: 6px 13px; border-radius: 999px; font-size: 0.87rem; font-weight: 500; border: 1px solid rgba(255,255,255,0.14); color: var(--text); background: rgba(255,255,255,0.04); } .mini-chip.on { border-color: rgba(122,100,255,0.6); background: rgba(122,100,255,0.2); color: #fff; } .mini-chip.warm { border-color: rgba(239,78,155,0.55); background: rgba(239,78,155,0.16); color: #fff; } /* the "how many new words" dial */ .mini-dial { display: flex; gap: 9px; margin-top: 6px; } .mini-dial span { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); font-family: var(--font-display); font-weight: 700; color: var(--text); } .mini-dial span.on { border-color: var(--purple); background: rgba(122,100,255,0.26); color: #fff; box-shadow: 0 0 16px rgba(122,100,255,0.4); } .mini-text { color: #e7eaea; font-size: 0.95rem; line-height: 1.6; margin: 0; } @media (max-width: 920px) { .how3 { grid-template-columns: 1fr; } } /* ---- BEFORE / AFTER ---- */ .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1000px; margin: 0 auto; } .ba-card { border-radius: var(--radius); padding: 36px 32px; border: 1px solid rgba(255,255,255,0.1); background: rgba(14,12,24,0.6); } .ba-card.after { border-color: rgba(146,124,255,0.6); background: linear-gradient(180deg, rgba(122,100,255,0.16), rgba(14,12,24,0.6)); } .ba-tag { font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .ba-card.after .ba-tag { color: var(--purple-light); } .ba-card h3 { font-size: 1.45rem; margin: 12px 0 20px; } .ba-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; } .ba-list li { display: flex; gap: 11px; color: var(--text); font-size: 1.02rem; line-height: 1.45; } .ba-mark { flex: none; font-weight: 700; color: var(--muted); } .ba-card.after .ba-mark { color: var(--purple-light); } @media (max-width: 780px) { .ba-grid { grid-template-columns: 1fr; } } /* ---- PRICING BAND ---- */ .price-card { max-width: 720px; margin: 0 auto; text-align: center; padding: 48px 40px; border-radius: var(--radius); border: 1px solid rgba(146,124,255,0.55); background: linear-gradient(180deg, rgba(122,100,255,0.15), rgba(12,10,22,0.75)); box-shadow: 0 22px 60px rgba(0,0,0,0.45); } .price-big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4rem); color: var(--white); line-height: 1; margin: 8px 0 6px; } .price-note { color: var(--text); font-size: 1.08rem; line-height: 1.6; margin: 0 auto 28px; max-width: 520px; } .price-card .checklist { max-width: 420px; margin: 0 auto 30px; text-align: left; } /* ============================================================ THE OFFER — branded link, revenue split, earnings ============================================================ */ /* The teacher's own subdomain, shown as a browser address bar. This is the single most concrete thing in the pitch, so it gets to look real. */ .url-bar { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; border-radius: 999px; max-width: 100%; border: 1px solid rgba(146,124,255,0.5); background: rgba(8,6,18,0.85); box-shadow: 0 10px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); font-family: var(--font-text); font-size: clamp(0.95rem, 1.5vw, 1.18rem); overflow: hidden; } .url-lock { flex: none; width: 16px; height: 16px; color: var(--purple-light); } .url-you { color: var(--white); font-weight: 700; } .url-rest { color: var(--muted); } .url-caret { flex: none; width: 2px; height: 1.15em; background: var(--purple-light); animation: url-blink 1.15s steps(1) infinite; } @keyframes url-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .url-caret { animation: none; } } /* Revenue split — two bars that read at a glance */ .split-viz { max-width: 620px; margin: 0 auto; } .split-bar { height: 58px; border-radius: 14px; overflow: hidden; display: flex; border: 1px solid rgba(146,124,255,0.4); } .split-you { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; background: var(--btn-grad); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; } .split-us { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); color: var(--muted); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; } .split-legend { display: flex; justify-content: space-between; gap: 20px; margin-top: 14px; } .split-legend span { color: var(--muted); font-size: 0.95rem; max-width: 46%; } .split-legend span:last-child { text-align: right; } .split-legend strong { color: var(--white); display: block; font-size: 1.02rem; margin-bottom: 2px; } /* Earnings ladder — what different prices and class sizes come to */ .earn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 940px; margin: 44px auto 0; } .earn-card { text-align: center; padding: 30px 24px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.1); background: rgba(12,10,22,0.6); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease); } .earn-card:hover { transform: translateY(-5px); border-color: rgba(146,124,255,0.8); } .earn-card.feature { border-color: rgba(146,124,255,0.7); background: linear-gradient(180deg, rgba(122,100,255,0.18), rgba(12,10,22,0.7)); } .earn-setup { color: var(--muted); font-size: 0.95rem; } .earn-amount { font-family: var(--font-display); font-weight: 800; line-height: 1; font-size: clamp(2rem, 4vw, 2.8rem); margin: 12px 0 6px; color: var(--white); } .earn-card.feature .earn-amount { background: var(--btn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .earn-per { color: var(--muted); font-size: 0.9rem; } @media (max-width: 800px) { .earn-grid { grid-template-columns: 1fr; gap: 16px; } } /* Partnership steps — numbered, on one horizontal track */ .pact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .pact-card { padding: 30px 26px; border-radius: var(--radius); border: 1px solid rgba(146,124,255,0.4); background: linear-gradient(180deg, rgba(26,22,44,0.72), rgba(12,10,22,0.72)); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .pact-card:hover { transform: translateY(-6px); border-color: rgba(146,124,255,0.9); box-shadow: 0 16px 44px rgba(90,60,200,0.4); } .pact-num { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1; background: var(--btn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .pact-card h3 { font-size: 1.16rem; margin: 14px 0 9px; } .pact-card p { color: var(--muted); font-size: 0.98rem; margin: 0; line-height: 1.5; } @media (max-width: 1000px) { .pact-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .pact-grid { grid-template-columns: 1fr; } } /* ---- INLINE EMAIL CAPTURE (final CTA) ---- */ .inline-form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 620px; margin: 0 auto; } .inline-form .field-input { flex: 1 1 300px; min-width: 0; text-align: left; } .inline-form .btn { flex: none; } /* ============================================================ PRODUCT DEMO — the "what the student sees" mock. Sits in a shared .split-hero-grid (style.css), which already collapses to one column at 920px — no layout rules needed here. ============================================================ */ .demo-card { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(146,124,255,0.45); background: linear-gradient(180deg, rgba(22,18,40,0.92), rgba(10,9,18,0.92)); box-shadow: 0 22px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); } .demo-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); } .demo-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18); flex: none; } .demo-bar-title { margin-left: 10px; color: var(--muted); font-size: 0.9rem; } .demo-body { padding: 26px 26px 30px; } .demo-label { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; } /* vocabulary chips — the three real statuses in the app */ .demo-words { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 26px; } .demo-word { padding: 7px 15px; border-radius: 999px; font-size: 0.94rem; font-weight: 500; border: 1px solid rgba(255,255,255,0.14); color: var(--text); background: rgba(255,255,255,0.04); } .demo-word.known { border-color: rgba(122,100,255,0.55); background: rgba(122,100,255,0.16); color: #fff; } .demo-word.learning { border-color: rgba(239,78,155,0.5); background: rgba(239,78,155,0.14); color: #fff; } .demo-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 0 0 24px; } .demo-story p { color: #e7eaea; font-size: 1.04rem; line-height: 1.7; margin: 0 0 14px; } /* the N new words the generator wove in */ .demo-new { color: #fff; font-weight: 600; background: rgba(122,100,255,0.28); border-bottom: 1.5px solid var(--purple-light); border-radius: 3px; padding: 1px 3px; } .demo-foot { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--muted); font-size: 0.9rem; } .demo-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: rgba(122,100,255,0.14); border: 1px solid rgba(122,100,255,0.4); color: var(--purple-light); font-size: 0.85rem; font-weight: 600; } @media (max-width: 620px) { .demo-body { padding: 22px 20px 24px; } .demo-foot { flex-direction: column; align-items: flex-start; gap: 8px; } } /* ============================================================ AUDIENCE ROWS — "is this you?" ============================================================ */ .audience-list { display: grid; gap: 18px; max-width: 940px; margin: 0 auto; } .audience-row { display: flex; align-items: flex-start; gap: 20px; padding: 26px 30px; border: 1px solid rgba(146,124,255,0.4); border-radius: var(--radius); background: linear-gradient(180deg, rgba(26,22,44,0.6), rgba(12,10,22,0.6)); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .audience-row:hover { transform: translateY(-4px); border-color: rgba(146,124,255,0.85); box-shadow: 0 14px 40px rgba(90,60,200,0.32); } .audience-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(122,100,255,0.16); color: var(--purple-light); } .audience-icon svg { width: 22px; height: 22px; } .audience-row h3 { font-size: 1.22rem; margin-bottom: 7px; } .audience-row p { color: var(--muted); font-size: 1rem; margin: 0; line-height: 1.55; } @media (max-width: 620px) { .audience-row { padding: 22px; gap: 16px; } } /* ============================================================ FAQ ACCORDION ============================================================ */ .faq { max-width: 880px; margin: 0 auto; } .faq-item { border-bottom: 1px solid rgba(255,255,255,0.14); } .faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.14); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: none; border: 0; padding: 26px 4px; text-align: left; font-family: var(--font-display); font-weight: 600; color: var(--white); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.35; transition: color 0.25s var(--ease); } .faq-q:hover { color: var(--purple-light); } .faq-plus { flex: none; width: 20px; height: 20px; position: relative; } .faq-plus::before, .faq-plus::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--purple-light); transform: translate(-50%, -50%); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .faq-plus::before { width: 18px; height: 2px; } .faq-plus::after { width: 2px; height: 18px; } .faq-item.open .faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); } .faq-item.open .faq-a { max-height: 460px; } .faq-a p { color: var(--text); font-size: 1.05rem; line-height: 1.65; margin: 0 0 26px; max-width: 760px; } .faq-a p:first-child { margin-top: -4px; } .faq-a a { color: var(--purple-light); } /* ============================================================ ONE-OFF LAYOUT HOOKS Named classes rather than inline style= attributes, which the webpieces no-custom-css rule rejects. ============================================================ */ /* a section that butts directly against the one above it */ .section-tight-top { padding-top: 0; } /* 404: centre the sparse content in the viewport */ .page-hero-404 { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; } .page-hero-actions { position: relative; z-index: 2; margin-top: 36px; } /* FormSubmit honeypot — off-screen, never shown to a human */ .honeypot { position: absolute; left: -9999px; } /* ============================================================ CLOSING NOTE — honest "where we are" band ============================================================ */ .note-band { max-width: 820px; margin: 0 auto; padding: 30px 34px; border-radius: var(--radius); border: 1px solid rgba(122,100,255,0.35); background: rgba(122,100,255,0.07); text-align: center; } .note-band p { color: var(--text); font-size: 1.05rem; line-height: 1.6; margin: 0; } .note-band strong { color: var(--white); } /* ============================================================ LANGUAGE CHOOSER The visitor cannot read English well yet — that is the whole premise of the product — so the page offers its own language before asking them to judge anything. Shown once, then remembered; reachable afterwards from .lang-switch in the header. ============================================================ */ /* Header switcher */ .lang-switch { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.35); border-radius: var(--radius-pill); padding: 10px 16px; font-family: var(--font-text); font-size: 0.95rem; font-weight: 500; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .lang-switch:hover { border-color: var(--purple-light); background: rgba(122,100,255,0.12); } .lang-switch svg { width: 17px; height: 17px; flex: none; } /* Modal */ .lang-modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.82); backdrop-filter: blur(8px); } .lang-modal.open { display: flex; } body.lang-locked { overflow: hidden; } .lang-dialog { width: 100%; max-width: 560px; padding: 44px 40px 34px; border-radius: var(--radius); border: 1px solid rgba(122,100,255,0.4); background: #0c0b16; text-align: center; animation: lang-in 0.32s var(--ease) both; } @keyframes lang-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } } .lang-dialog h2 { font-family: var(--font-display); color: var(--white); font-size: 1.7rem; line-height: 1.2; margin: 0 0 26px; } /* The same invitation in a few of the offered languages, so a visitor who cannot read the English heading still recognises what is being asked. */ .lang-sub { display: block; margin-top: 10px; font-family: var(--font-text); font-size: 0.95rem; font-weight: 400; color: var(--muted); } .lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .lang-opt { padding: 15px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); color: var(--white); font-family: var(--font-text); font-size: 1.05rem; text-align: center; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); } .lang-opt:hover { border-color: var(--purple-light); background: rgba(122,100,255,0.16); transform: translateY(-2px); } /* The browser's own language, surfaced but never auto-applied. */ .lang-opt.suggested { border-color: var(--purple); background: rgba(122,100,255,0.14); } .lang-foot { margin: 24px 0 0; color: var(--muted); font-size: 0.9rem; } @media (max-width: 560px) { .lang-dialog { padding: 34px 22px 26px; } .lang-dialog h2 { font-size: 1.4rem; } .lang-grid { grid-template-columns: 1fr 1fr; } .lang-opt { font-size: 1rem; padding: 14px 10px; } } /* The switcher is a lot of chrome on a phone; the modal stays reachable from the footer language link, and the choice is remembered anyway. */ @media (max-width: 920px) { .lang-switch-label { display: none; } .lang-switch { padding: 10px; } } /* ── Header, translated ── Other languages run longer than English: unguarded, "CTO Teachings", the nav labels and the CTA each wrap onto two lines and the bar doubles in height. Keep every chrome label on one line and buy the space back from the padding. */ .brand-name, .nav-link, .header-cta, .lang-switch-label { white-space: nowrap; } @media (min-width: 921px) { .nav-link { padding-left: 18px; padding-right: 18px; } .header-inner { gap: 16px; } } /* ── Footer rules, matched ── .site-footer's border-top runs the full width of the page, but style.css caps .footer-bottom at --maxw, so the lower rule stopped ~1280px short and the two read as a mistake. Let the band go edge to edge and carry the border, then put the container back on the inner so the copyright still lines up with the logo and the link columns above it. */ .footer-bottom { max-width: none; margin: 50px 0 0; padding: 0; } .footer-bottom > span { display: block; max-width: var(--maxw); margin: 0 auto; padding: 24px 40px 0; }