/* Palette taken from farnoosh-shamsian.github.io so the two sites read as one. The gold is the one addition: it is the logo's own colour. */ :root { --primary-color: #530707; --article-header-color: #5b0000; --secondary-color: #b7af9f; --footer-color: #b7af9f; --background-color: #cdc6b6; --text-color: #1f1c16; --link-color: #530707; --accent-gold: #d4a87a; /* Small filled surfaces take a brownish red, not the heading red, which reads too hot against the sand. */ --deep-red: #3a1712; /* Text sitting on one of those filled surfaces. */ --on-accent: #cacbc4; /* Rules and borders carry 3:1 against the ground they sit on, so an edge is still an edge with reduced contrast sensitivity. Hence the dark hairline rather than the faint one the sand would otherwise invite. */ --rule-color: rgba(31, 28, 22, 0.55); --figure-tint: rgba(31, 28, 22, 0.10); --header-font-size: clamp(26px, 2.4vw, 38px); --nav--font-size: clamp(16px, 1vw, 20px); } /* Dark theme, applied only when the visitor asks for it — never from the OS setting. A script in stamps data-theme before the first paint. The red inverts rather than darkens: on a dark ground a deep red button reads as a hole, so filled accents become gold with dark text. */ :root[data-theme="dark"] { --primary-color: #d4a87a; --article-header-color: #e0b68a; --secondary-color: #362923; --footer-color: #362923; --background-color: #181310; --text-color: #e7ded0; --link-color: #d4a87a; --deep-red: #d4a87a; --on-accent: #181310; --rule-color: rgba(231, 222, 208, 0.42); --figure-tint: rgba(231, 222, 208, 0.09); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { width: 100%; margin: 0 auto; font-family: "Cambria", Georgia, "Times New Roman", serif; background-color: var(--background-color); color: var(--text-color); } [hidden] { display: none !important; } /* Persian panels: readable Persian font stack, generous line height. */ [lang="fa"] { font-family: "Noto Naskh Arabic", "B Lotus", "Cambria", Georgia, "Times New Roman", serif; line-height: 1.9; } /* Identifiers that must survive a line break intact — model ids and the like would otherwise split at their hyphens. */ .no-break { white-space: nowrap; } /* Header: brand left, nav and language switch right. */ header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; padding: 18px 5vw; border-bottom: 1px solid var(--rule-color); } /* The brand is the logo's wordmark, not set text: the name alone, without the emblem or rule. Its height is tied to the old title's font size. */ header h1 { order: 1; margin: 0; font-size: var(--header-font-size); line-height: 0; } header h1 a { display: block; text-decoration: none; } .brand-mark { display: block; height: 0.78em; width: auto; } .menu-icon { display: none; order: 3; font-size: 28px; cursor: pointer; padding: 4px 10px; color: var(--text-color); transition: all ease-in-out 0.2s; } .menu-icon:hover { color: var(--primary-color); } nav { order: 2; margin-inline-start: auto; overflow: hidden; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } nav ul li { padding: 8px 11px; } nav ul li a { display: block; color: var(--text-color); text-decoration: none; font-size: var(--nav--font-size); transition: all ease-in-out 0.2s; } nav ul li a:hover { color: var(--primary-color); } @media screen and (max-width: 950px) { .menu-icon { display: block; margin-inline-start: auto; } nav { order: 4; flex-basis: 100%; margin-inline-start: 0; } nav ul { flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; } nav ul.show { max-height: 400px; } nav ul li { text-align: center; padding: 10px; } } /* Language switch */ .header-controls { order: 3; display: flex; align-items: center; gap: 10px; } .lang-switch { display: flex; justify-content: center; gap: 10px; } @media screen and (max-width: 950px) { .header-controls { order: 2; margin-inline-start: auto; } .menu-icon { margin-inline-start: 0; } } .lang-btn { font-family: inherit; font-size: 1em; padding: 6px 18px; border: 1px solid var(--text-color); border-radius: 5px; background: transparent; color: var(--text-color); cursor: pointer; transition: all ease-in-out 0.2s; } .lang-btn:hover { color: var(--primary-color); border-color: var(--primary-color); } .lang-btn.is-active { background-color: var(--deep-red); border-color: var(--deep-red); color: var(--on-accent); } /* Theme switch: same chip as the language buttons, carrying a sun or a moon. */ .theme-btn { font-family: inherit; font-size: 1.05em; line-height: 1; padding: 7px 14px; border: 1px solid var(--text-color); border-radius: 5px; background: transparent; color: var(--text-color); cursor: pointer; transition: all ease-in-out 0.2s; } .theme-btn:hover { color: var(--primary-color); border-color: var(--primary-color); } /* Hero: no band and no photo, so the background runs unbroken from the header. */ .hero { padding: 60px 10vw 50px; text-align: center; } .hero-logo { width: min(340px, 75vw); height: auto; margin-bottom: 28px; } .hero-content h2 { font-family: "Playfair Display", "Cambria", Georgia, serif; font-size: clamp(1.8em, 4vw, 3em); color: var(--primary-color); margin: 0; } [lang="fa"] .hero-content h2 { font-family: inherit; } .hero-content p { font-size: clamp(1.15em, 2vw, 1.5em); color: var(--text-color); max-width: 900px; margin-left: auto; margin-right: auto; } /* Buttons */ .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; } .button { display: inline-block; padding: 12px 30px; border-radius: 5px; font-size: 1.1em; text-decoration: none; transition: all ease-in-out 0.2s; } .button-primary { background-color: var(--deep-red); color: var(--on-accent); border: 2px solid var(--deep-red); } .button-primary:hover { background-color: var(--article-header-color); border-color: var(--article-header-color); transform: scale(1.03); } .button-secondary { border: 2px solid var(--text-color); color: var(--text-color); background: transparent; } .button-secondary:hover { color: var(--primary-color); border-color: var(--primary-color); transform: scale(1.03); } /* Patience note */ .note { max-width: 760px; margin: 36px auto 0; padding: 16px 22px; background-color: var(--secondary-color); color: var(--text-color); border-inline-start: 6px solid var(--deep-red); border-radius: 5px; font-size: 1.05em; text-align: start; } .note strong { color: var(--article-header-color); } /* Sections & cards (same look as the "posts" cards on the personal page) */ .section { padding: 50px 20px 10px; text-align: center; } .section h2, .section-heading { font-family: "Playfair Display", "Cambria", Georgia, serif; font-size: 2.2em; color: var(--primary-color); margin: 0 0 10px; } [lang="fa"] .section h2 { font-family: inherit; } /* Persian keeps the wider leading set on [lang="fa"]. */ [lang="fa"] .about-block, [lang="fa"] .limits { line-height: 1.9; } .section-intro { max-width: 800px; margin: 0 auto; font-size: 1.15em; } .eyebrow { text-transform: uppercase; letter-spacing: 0.2em; color: var(--primary-color); font-weight: 700; margin: 0 0 8px; } .posts { display: flex; flex-wrap: wrap; justify-content: center; padding: 20px 20px 40px; } .posts article { background-color: var(--secondary-color); padding: 20px; margin: 1%; width: 30%; min-width: 320px; max-width: 480px; text-align: center; font-size: 1.2em; border-radius: 5px; flex-basis: 30%; /* Faded, but not so far that the card's own body text drops under 4.5:1 — the hover that restores it never arrives on touch or by keyboard. */ opacity: 0.85; /* Only what the hover changes: `all` would fade the card's colours on every theme switch. */ transition: opacity ease-in-out 0.5s, transform ease-in-out 0.5s; } .posts article:hover { opacity: 1; transform: scale(1.02); } @media (max-width: 1200px) { .posts article { flex-basis: 50%; width: 100%; } } .posts article h3 { color: var(--article-header-color); font-size: 1.5em; margin-top: 0; } .posts article p { font-size: 0.95em; color: var(--text-color); text-align: start; } /* Stats band: the project's scale, one figure per tile. */ .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 40px 20px 10px; } .stats div { background-color: var(--secondary-color); border-radius: 5px; padding: 18px 26px; min-width: 180px; text-align: center; } .stats .num { display: block; font-family: "Playfair Display", "Cambria", Georgia, serif; font-size: 2.6em; line-height: 1.1; color: var(--article-header-color); } [lang="fa"] .stats .num { font-family: inherit; } .stats .label { display: block; font-size: 0.95em; } /* Numbered pipeline steps */ .steps { max-width: 900px; margin: 0 auto; padding: 10px 20px 20px; list-style: none; counter-reset: step; } .steps li { position: relative; padding-inline-start: 70px; margin-bottom: 28px; min-height: 46px; } .steps li::before { counter-increment: step; content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; background-color: var(--deep-red); color: var(--on-accent); font-family: "Playfair Display", "Cambria", Georgia, serif; font-size: 1.25em; display: flex; align-items: center; justify-content: center; } [lang="fa"] .steps li::before { content: counter(step, persian); font-family: inherit; } .steps h3 { margin: 6px 0 8px; font-size: 1.4em; color: var(--article-header-color); } .steps p { margin: 0; font-size: 1.05em; text-align: start; } /* Worked example / figure line */ .figure { max-width: 840px; margin: 0 auto 20px; padding: 14px 22px; background-color: var(--figure-tint); border-radius: 5px; text-align: center; font-size: 1.1em; } /* Problem → response pairs */ .pairs { max-width: 900px; margin: 0 auto; padding: 10px 20px 30px; } .pairs .pair { background-color: var(--secondary-color); border-radius: 5px; padding: 18px 24px; margin-bottom: 16px; text-align: start; } .pairs .problem { margin: 0 0 8px; font-weight: 700; color: var(--article-header-color); } .pairs .response { margin: 0; font-size: 1.02em; } /* Call to action: an invitation to translate the project. */ .cta { max-width: 840px; margin: 0 auto 40px; padding: 26px 30px; background-color: var(--secondary-color); color: var(--text-color); border-radius: 5px; text-align: start; } .cta h3 { margin: 0 0 10px; font-family: "Playfair Display", "Cambria", Georgia, serif; font-size: 1.6em; color: var(--article-header-color); } [lang="fa"] .cta h3 { font-family: inherit; } .cta p { margin: 0; font-size: 1.08em; } .cta a { color: var(--link-color); } /* A button inside the box keeps its own colours, not the link colour. */ .cta .button-primary { margin-top: 18px; color: var(--on-accent); } /* Known limitations */ /* The type scales with the column so the line stays at its current length: a wider measure at the old size would run past 100 characters. */ .limits { max-width: 960px; margin: 0 auto; padding: 0 20px 20px; /* The shorthand above would otherwise kill the list's default indent. */ padding-inline-start: 46px; font-size: clamp(1.05em, 0.9rem + 0.5vw, 1.25em); line-height: 1.6; text-align: start; } .limits li { margin-bottom: 10px; } /* About block */ .about-block { max-width: 960px; margin: 0 auto; padding: 0 20px 50px; font-size: clamp(1.1em, 0.95rem + 0.5vw, 1.35em); line-height: 1.6; text-align: start; } /* The licence notice is boilerplate, not narrative: it keeps the old size. */ .about-block.colophon { max-width: 800px; font-size: 1.05em; } .about-block a, .limits a, .note a { color: var(--link-color); } /* Footer */ footer { background-color: var(--footer-color); padding: 20px; text-align: center; font-size: 1em; } footer p { margin: 0; font-size: 1em; color: var(--text-color); } footer a { color: var(--link-color); }