/* =================================================================== Silographia — Universal Stylesheet File: /css/silographia_universal.css Scope: Arabic, English, Bilingual (RTL/LTR), Light/Dark, Responsive Notes: - Uses CSS logical properties for seamless RTL/LTR. - Adds accessible focus, reduced-motion support. - Includes editorial style sets requested by Qais: • Introductory “Orichetto” • Blockquotes (3 variants) • Paragraph styles (3 variants) • Highlights (3 variants) =================================================================== */ /* ========== 0) Base Reset & Media Defaults (safe, non-destructive) ========== */ /* Box sizing: predictable layout everywhere */ *, *::before, *::after { box-sizing: border-box; } /* Media should scale to container width by default */ img, video, svg { max-width: 100%; height: auto; display: block; } /* Keyboard focus clearly visible */ a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Respect reduced motion preferences */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* ========== 1) Root, Direction & Anchor Offset ========== */ /* Theme variables & shared token */ :root { --bg-light: #e5dbc8; /* light sand backgroung alt: --bg:#f5ead4; */ /* --bg-light: #fefaf3; light background */ --text-light: #111; /* light text */ --bg-dark: #121212; /* dark background */ --text-dark: #f0f0f0; /* dark text */ --accent2: #174a63; /* teal-ink accent used in quotes, etc. */ --accent2-light: #3fa4cc; /* lighter accent for dark mode */ --headerH: 72px; /* sticky header height for anchor offset */ /* Additional colors */ --ink: #1d1d1d; --accent: #7b2d26; --muted: #6f6b63; --card: #f5ead4; --shadow: 0 10px 25px rgba(0,0,0,.08); --glass: #ffffffee; --glass-border: #00000018; color-scheme: light dark; } html { scroll-behavior: smooth; } /* Offset anchored headings so they don't hide under sticky header */ h1[id], h2[id], h3[id], section[id], [id].anchor-target { scroll-margin-top: calc(var(--headerH) + 12px); } /* Direction: prefer setting dir on , but support explicit overrides */ html[lang="ar"], html[lang="fa"], html[lang="ur"], html[lang="he"], body[dir="rtl"] { direction: rtl; } html[lang="en"], html[lang="es"], html[lang="fr"], html[lang="it"], html[lang="tr"], html[lang="ru"], html[lang="uk"], body[dir="ltr"] { direction: ltr; } /* Arabic / Persian / Urdu font stacks without affecting LTR */ :lang(ar), :lang(fa), :lang(ur) { font-family: "Amiri","Noto Naskh Arabic","Scheherazade New","Vazirmatn",Tahoma,Arial,serif; } :lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(fa) h1, :lang(fa) h2, :lang(fa) h3, :lang(ur) h1, :lang(ur) h2, :lang(ur) h3 { font-family: "Amiri","Noto Naskh Arabic","Vazirmatn",serif; line-height: 1.6; } /* ========== 2) Body, Header & Global Layout ========== */ body { font-family: Georgia, serif; line-height: 1.7; margin: 0 auto; padding: 0.2rem 1rem; background-color: var(--bg-light); color: var(--text-light); transition: background-color 0.3s, color 0.3s; border: 1px dotted var(--glass-border); /* subtle frame */ } /* Header: sticky + compact + perfectly aligned */ .site-header{ position: sticky; top: 0; /* broader support than inset-block-start */ z-index: 2000; display: flex; align-items: center; /* vertical centering of logo + text */ justify-content: space-between; padding: .55rem clamp(12px, 2vw, 24px); line-height: 1.2; /* avoids tall header from body line-height */ background: var(--glass); /* glass via tokens */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* Safari */ border-bottom: 1px solid var(--glass-border); } /* Brand row (logo + name) */ .brand{ display: flex; align-items: center; gap: .6rem; } .brand img{ height: 56px; /* adjust if you want smaller/larger */ width: auto; display: block; /* removes baseline gap */ border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.15); } .brand-name{ font-weight: 700; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1; /* tight to match image */ margin: 0; padding: 0; } @media (max-width: 480px){ .brand img{ height: 46px; } } /* improves Brand logo */ .brand-link:focus-visible img { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; box-shadow: 0 0 0 2px rgba(0,0,0,.08); cursor: pointer; } /* Keep header coherent in RTL documents */ html[lang="ar"] .site-header, html[lang="fa"] .site-header, html[lang="ur"] .site-header, html[lang="he"] .site-header, [dir="rtl"] .site-header { direction: rtl; } /* Theme toggle button (if used) */ .theme-toggle { font-size: 0.9rem; cursor: pointer; background: none; border: 1px solid #ccc; padding: 0.25rem 0.5rem; border-radius: 5px; color: inherit; margin-block-start: 0.5rem; } /* ========== 3) Typography ========== */ h1, h2 { text-align: center; } h3, h4, h5 { text-align: start; } /* start = left in LTR, right in RTL */ p { text-align: justify; } a { color: #0055aa; text-decoration: none; } a:hover { text-decoration: underline; } .meta { text-align: center; font-style: italic; margin-block-end: 2rem; } /* Headings use accent2 color */ h1, h2, h3 { color: var(--accent2); } /* ========== 4) Containers ========== */ .content { max-width: 800px; margin: 0 auto; padding-inline: 1rem; } /* Legacy main kept for backward compatibility (prefer .content) */ main { max-width: 850px; padding: 2rem; margin: 0 auto; } /* ========== 5) Editorial Blocks: Introduction & Poem ========== */ /* Generic intro and poem blocks with logical margins */ .introduction, .poemar { margin-inline: 20%; max-width: 60%; text-align: justify; } .poemar { font-size: 1.2rem; } /* Mobile: allow full width for readability */ @media screen and (pmx-width: 768px) { .introduction, .poemar { margin-inline: 0; max-width: 100%; } } /* ========== 6) Language Switcher ========== */ /* Compact, RTL/LTR-safe language selector */ .lang-switch { margin-block: 8px 16px; margin-inline: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; font-size: 0.95rem; text-align: center; } .lang-switch .sep { opacity: .4; } .lang-switch a { text-decoration: none; padding-block: 2px; padding-inline: 10px; border-radius: 999px; border: 1px solid transparent; opacity: .7; transition: all .15s ease; display: inline-block; } .lang-switch a:hover { opacity: 1; border-color: currentColor; } .lang-switch a.active { font-weight: 700; opacity: 1; border-color: currentColor; } /* ========== 7) Blockquotes — Base + 3 Variants ========== */ /* Base blockquote (used when no variant class is applied) */ blockquote { border-inline-start: 4px solid var(--accent2); padding: .5rem 1rem; background: var(--glass); margin-block: 1rem; } /* —— Variant 1: Classic (narrow, subtle) —— */ blockquote.bq-classic, .bq-classic { border-inline-start: 4px solid var(--accent2); background: var(--glass); padding: .6rem 1rem; margin-block: 1.2rem; font-style: italic; } /* —— Variant 2: Frame (boxed, editorial) —— */ blockquote.bq-frame, .bq-frame { border: 1px dashed #bbb; border-radius: 8px; padding: 1rem 1.2rem; background: var(--card); margin-block: 1.2rem; } /* —— Variant 3: Pull-quote (emphatic, centered) —— */ blockquote.bq-pull, .bq-pull { font-size: 1.25rem; line-height: 1.6; text-align: center; font-style: italic; margin-block: 1.6rem; padding: 0.8rem 1rem; position: relative; } blockquote.bq-pull::before, blockquote.bq-pull::after, .bq-pull::before, .bq-pull::after { content: "“"; position: absolute; inset-block-start: -0.4rem; font-size: 2.2rem; line-height: 1; opacity: .25; } blockquote.bq-pull::after, .bq-pull::after { content: "”"; inset-block-start: auto; inset-block-end: -0.6rem; } /* ========== 8) Paragraph Styles (3 Variants) ========== */ /* Lead paragraph: larger, slightly softer color, extra spacing */ .para-lead { font-size: 1.15rem; line-height: 1.8; color: #222; margin-block: 1.2rem; } /* Note paragraph: tinted background callout */ .para-note { background: #fff7da; border: 1px solid #ead79a; border-radius: 8px; padding: 0.75rem 1rem; margin-block: 1rem; } /* Small paragraph: for captions or compact notes */ .para-small { font-size: 0.92rem; line-height: 1.55; color: #444; margin-block: 0.6rem; } /* ========== 9) Highlights (3 Variants) ========== */ /* Apply to inside text to emphasize content */ /* Highlighter stripe: classic yellow */ .hl-yellow { background-image: linear-gradient(transparent 60%, #fff59a 60%); } /* Ink underline: editorial underline with offset and weight */ .hl-ink { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* Outline badge: subtle inset box around text */ .hl-outline { padding-inline: .25rem; border-radius: .35rem; box-shadow: inset 0 0 0 1px #bbb; } /* Dark-mode tuning for highlights */ body.dark-mode .hl-yellow { background-image: linear-gradient(transparent 60%, #665500 60%); } body.dark-mode .hl-outline { box-shadow: inset 0 0 0 1px #666; } /* ========== 10) Introductory “Orichetto” ========== */ /* A welcoming intro block with a rounded “ear” on the inline start side, plus a gentle dropcap for the first letter. Works in RTL/LTR. */ .intro-orichetto { position: relative; background: var(--card); border: 1px solid #e8dcc2; border-radius: 12px; padding: 1rem 1.2rem; margin-block: 1.2rem 1.6rem; box-shadow: 0 1px 0 rgba(0,0,0,.03); } /* The “ear” */ .intro-orichetto::before { content: ""; position: absolute; inset-block-start: 0.8rem; inset-inline-start: -0.6rem; /* logical start (left in LTR, right in RTL) */ width: 14px; height: 14px; background: var(--accent2); border-radius: 999px; box-shadow: 0 0 0 4px #f1e8d4; /* soft halo */ } /* Gentle drop cap */ .intro-orichetto::first-letter { font-size: 2.2rem; line-height: 1; font-weight: 600; float: inline-start; /* logical float for RTL/LTR */ margin-inline-end: .35rem; margin-block-start: .15rem; color: #123c50; } /* ========== 11) Endnotes & Article Headings ========== */ .endnotes ol { padding-inline-start: 1.2rem; } article h2 { margin-block-start: 2.4rem; text-align: start; } /* ========== 12) Responsive Adjustments ========== */ @media screen and (max-width: 768px) { body { padding: 1rem; font-size: 1rem; line-height: 1.6; } h1, h2, h3, h4, h5 { font-size: 1.3rem; text-align: center; line-height: 1.4; } nav, footer { text-align: center; font-size: 0.9rem; } .author-signature, .date-tag { display: block; margin-block-start: 1rem; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* Safari */ font-size: 0.9rem; text-align: center; } .content img { margin: 1rem auto; } .lang-switch { margin: 1rem auto; } } /* Global nav/footer alignment */ nav, footer { text-align: center; font-size: 0.9rem; color: var(--muted); } /* ========== 13) Light/Dark Modes ========== */ body.light-mode { background-color: var(--bg-light); color: var(--text-light); } body.dark-mode { background-color: var(--bg-dark); color: var(--text-dark); } /* Links in dark mode — keep brand accent */ body.dark-mode a { color: var(--accent2-light); } /* Header glass & borders via tokens in dark */ body.dark-mode .site-header { background: var(--glass); border-color: var(--glass-border); } body.dark-mode .theme-toggle { border-color: #666; } /* Headings in dark mode: lighter accent for contrast */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { color: var(--accent2-light); } /* ========== 11b) Editorial Note & Section Divider ========== */ /* Dark grey editorial note block consistent across articles */ .editorial-note { font-style: italic; font-size: 0.95rem; color: var(--muted); /* dark grey via token */ margin: 2em 10em; /* wide margins on desktop */ text-align: start; } @media (max-width: 900px) { .editorial-note { margin: 1.5em 3em; } } @media (max-width: 600px) { .editorial-note { margin: 1.2em 1em; } } /* Section divider
*/ hr.section-divider { border: 0; border-top: 1px solid var(--glass-border); margin-block: 1em; opacity: .5; } /* ========== 11c) Follow block (social) ========== */ .follow { margin-block-start: 2rem; text-align: center; color: var(--muted); } .follow .social { display: flex; justify-content: center; align-items: center; gap: 30px; /* matches your inline gap */ } .follow .social svg { width: 28px; height: 28px; fill: var(--muted); } /* ========== 11d) Footnotes / Endnotes ========== */ /* Keep existing .endnotes ol and add spacing for items */ .endnotes ol { padding-inline-start: 1.2rem; } /* (already present in your CSS) */ .endnotes li { margin-block: .6rem; } /* Optional alias if you sometimes use .footnotes instead of .endnotes */ :is(.endnotes, .footnotes) { font-size: 0.95rem; color: #444; } :is(.endnotes, .footnotes) ol { padding-inline-start: 1.2rem; } :is(.endnotes, .footnotes) li { margin-block: .6rem; } /* ========== 11e) Bottom dock (sticky) ========== */ nav.dock { position: sticky; inset-block-end: 0; /* bottom */ background: var(--glass); /* theme-aware glass */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; justify-content: space-around; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--glass-border); } nav.dock a { font-size: .85rem; color: #1d1d1d; text-decoration: none; min-height: 44px; display: flex; align-items: center; padding: .25rem .5rem; border-radius: .5rem; } /* ========== 14) Cards ========== */ :root { /* already defined in your file: --card: #f5ead4; --ink: #1d1d1d; --muted: #6f6b63; --glass: #ffffffee; --glass-border: #00000018; --shadow: 0 10px 25px rgba(0,0,0,.08); */ } /* Card base */ .card { background: var(--card); color: var(--ink); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: var(--shadow); padding: 1rem 1.2rem; transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; } /* Substructure (optional) */ .card-header { font-weight: 700; margin-block-end: .4rem; color: var(--accent2); } .card-meta { font-size: .9rem; color: var(--muted); margin-block-end: .6rem; } .card-body { line-height: 1.7; } .card-footer { margin-block-start: .8rem; display: flex; gap: .6rem; justify-content: flex-end; } /* Media inside card */ .card :is(img, video, svg) { border-radius: 10px; } .card img { margin: .5rem 0; } /* Interactive feel */ .card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.12); } .card:focus-within { outline: 2px solid var(--accent2-light); outline-offset: 2px; } /* Variants */ .card--elevated { background: var(--glass); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .card--outlined { background: transparent; border: 1px dashed var(--glass-border); box-shadow: none; } .card--compact { padding: .8rem 1rem; } /* Clickable card */ a.card, .card--link { display: block; text-decoration: none; color: inherit; } /* Card grid */ .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } @media (max-width: 520px) { .cards { grid-template-columns: 1fr; } } /* Dark mode tweaks (inherits tokens automatically) */ body.dark-mode .card--outlined { border-color: var(--glass-border); }