/* ========================================================================== VICHAR — OPINION Design tokens grounded in the parent Vichar Media brand: ink-on-paper, manuscript/ledger motif, Bharat-rooted, Gen Z investigative. Web fonts are loaded via in each page's (with display=swap), NOT via an @import here: an @import forces a render-blocking waterfall (HTML -> CSS -> CSS -> font). See any page head. ========================================================================== */ :root{ /* ---- color: ink-well palette ---- */ --bg: #15110C; /* well of ink — page background */ --surface: #1F180F; /* raised paper panel */ --surface-2: #251C12; /* deeper card / hover */ --line: #372B1C; /* hairline rule */ --line-soft: #2A2116; --ink: #EFE6D4; /* primary text — parchment */ --ink-muted: #B3A188; /* secondary text */ --ink-faint: #7C6F5B; /* tertiary / placeholders */ --gold: #C99544; /* saffron ink — primary accent */ --gold-bright: #E4B466; --red: #9C3B24; /* sindoor red — category / tag accent */ --red-bright: #C24C30; /* ---- type ---- */ --f-display: 'Fraunces', 'Source Serif 4', Georgia, serif; --f-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --f-ui: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif; --fs-meta: 0.82rem; --fs-small: 0.95rem; --fs-body: 1.125rem; --fs-h3: 1.4rem; --fs-h2: clamp(1.9rem, 3.4vw, 2.6rem); --fs-h1: clamp(2.3rem, 5.2vw, 3.9rem); --fs-display: clamp(2.6rem, 6.5vw, 5rem); /* ---- spacing ---- */ --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.6rem; --sp-4: 2.4rem; --sp-5: 3.6rem; --sp-6: 5.4rem; --sp-7: 8rem; --content-w: 700px; --rail-w: 200px; --wrap-w: 1180px; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:var(--fs-body); line-height:1.5; -webkit-font-smoothing:antialiased; background-image: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(201,149,68,.07), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 0%, rgba(156,59,36,.06), transparent 60%); background-repeat:no-repeat; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3{ font-family:var(--f-display); font-weight:600; line-height:1.1; margin:0; color:var(--ink); } p{ margin:0 0 1.2em; } .wrap{ max-width:var(--wrap-w); margin:0 auto; padding:0 var(--sp-3); } @media(max-width:640px){ .wrap{ padding:0 var(--sp-2); } } /* focus visibility */ a:focus-visible, button:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* faint paper grain over the whole page — keeps the dark ink-well from reading flat */ body::before{ content:''; position:fixed; inset:0; z-index:2; pointer-events:none; background-image:repeating-linear-gradient(115deg, rgba(239,230,212,.025) 0 2px, transparent 2px 6px); mix-blend-mode:overlay; } /* ========================================================================== ILLUMINATED-MANUSCRIPT ORNAMENT SYSTEM letterhead rule, corner-flourish frame, wax-seal badge, law-box ========================================================================== */ /* letterhead — a thin double gold rule under the masthead */ .letterhead{ height:5px; border-top:1px solid var(--gold); border-bottom:1px solid var(--gold); opacity:.55; } /* framed — a bordered box with gold flourishes picked out at each corner. Only sets position/border; spacing is tuned per element it's combined with. */ .framed{ position:relative; border:1px solid var(--line); } .framed > .corner{ position:absolute; width:18px; height:18px; pointer-events:none; } .framed > .corner.tl{ top:-1px; left:-1px; border-top:2px solid var(--gold-bright); border-left:2px solid var(--gold-bright); } .framed > .corner.tr{ top:-1px; right:-1px; border-top:2px solid var(--gold-bright); border-right:2px solid var(--gold-bright); } .framed > .corner.bl{ bottom:-1px; left:-1px; border-bottom:2px solid var(--gold-bright); border-left:2px solid var(--gold-bright); } .framed > .corner.br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--gold-bright); border-right:2px solid var(--gold-bright); } /* seal — a wax-stamp badge used wherever a piece needs to be marked "protected" */ .seal{ width:96px; height:96px; flex:none; border-radius:50%; border:2px solid var(--red-bright); outline:1px solid rgba(156,59,36,.5); outline-offset:6px; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--f-ui); font-size:.6rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; line-height:1.35; color:var(--red-bright); background:radial-gradient(circle at 35% 30%, rgba(156,59,36,.14), transparent 65%); } /* law-box — the constitutional-protection note (homepage) and its rail echo (per-post pages) */ .law-section{ border-top:1px solid var(--line); padding:var(--sp-6) 0; } .law-box{ padding:var(--sp-5) var(--sp-4); display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); align-items:start; } .law-box h2{ font-size:var(--fs-h2); margin-bottom:var(--sp-2); } .law-box .statute{ font-family:var(--f-body); font-style:italic; color:var(--ink-muted); border-left:2px solid var(--red); margin:var(--sp-3) 0; padding:.1em 0 .1em var(--sp-3); } .law-box .statute .cite{ display:block; font-family:var(--f-ui); font-style:normal; font-size:.75rem; color:var(--ink-faint); letter-spacing:.03em; margin-top:.5em; } .law-box .note{ font-family:var(--f-ui); font-size:.85rem; color:var(--ink-faint); margin-top:var(--sp-3); margin-bottom:0; } @media(max-width:640px){ .law-box{ grid-template-columns:1fr; } .law-box .seal{ margin:0 auto; } } /* per-post rail echo of the same note */ .rail .value a{ border-bottom:1px solid var(--line); } .rail .value a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); } /* ========================================================================== NAV / MASTHEAD ========================================================================== */ .masthead{ border-bottom:1px solid var(--line); padding:var(--sp-3) 0; } .masthead .wrap{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; } .brand{ display:flex; align-items:baseline; gap:.55rem; font-family:var(--f-ui); } .brand .hi{ font-size:1.15rem; color:var(--gold-bright); font-weight:500; } .brand .en{ font-size:1rem; letter-spacing:.14em; color:var(--ink-muted); } .brand small{ display:block; font-size:.72rem; color:var(--ink-faint); letter-spacing:.08em; margin-top:2px; font-family:var(--f-ui); } .masthead nav{ display:flex; gap:var(--sp-4); font-family:var(--f-ui); font-size:.92rem; } .masthead nav a{ color:var(--ink-muted); border-bottom:1px solid transparent; padding-bottom:2px; transition:color .15s, border-color .15s; } .masthead nav a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); } .masthead nav a.home-link{ color:var(--ink); } /* ========================================================================== HOMEPAGE — intro / statement ========================================================================== */ .intro{ padding:var(--sp-6) 0 var(--sp-5); } .intro .kicker{ font-family:var(--f-ui); font-size:.9rem; color:var(--red-bright); margin:0 0 var(--sp-2); } .intro h1{ font-size:var(--fs-display); max-width:14ch; font-style:italic; font-weight:500; } .intro p{ font-family:var(--f-body); color:var(--ink-muted); font-size:1.2rem; max-width:52ch; margin-top:var(--sp-3); } /* Featured / latest entry */ .featured{ padding:var(--sp-5) 0; display:grid; grid-template-columns: 1.1fr .9fr; gap:var(--sp-5); align-items:center; } /* when the featured entry sits inside the ornamental frame, the frame supplies the border — don't double it up */ .featured-wrap{ margin:var(--sp-5) 0; padding:0 var(--sp-4); } .featured-wrap .featured{ padding:var(--sp-4) 0; } .featured .art{ order:2; aspect-ratio:4/3; border-radius:2px; overflow:hidden; } .featured .meta-row{ font-family:var(--f-ui); font-size:var(--fs-meta); color:var(--ink-faint); display:flex; gap:var(--sp-2); align-items:center; margin-bottom:var(--sp-2); } .tag{ font-family:var(--f-ui); font-size:.72rem; letter-spacing:.06em; color:var(--red-bright); border:1px solid rgba(156,59,36,.5); padding:.18em .6em; border-radius:2px; } .featured h2{ font-size:var(--fs-h1); margin-bottom:var(--sp-2); } .featured h2 a:hover{ color:var(--gold-bright); } .featured .dek{ color:var(--ink-muted); font-size:1.08rem; max-width:56ch; } .byline{ font-family:var(--f-ui); font-size:var(--fs-small); color:var(--ink-faint); margin-top:var(--sp-2); } .byline b{ color:var(--ink-muted); font-weight:500; } /* Ledger list */ .ledger{ padding:var(--sp-6) 0 var(--sp-7); } .ledger > .head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--sp-4); } .ledger > .head h2{ font-size:var(--fs-h2); } .ledger > .head span{ font-family:var(--f-ui); font-size:var(--fs-small); color:var(--ink-faint); } .entry{ display:grid; grid-template-columns: 90px 1fr 130px; gap:var(--sp-3); align-items:start; padding:var(--sp-3) 0; border-top:1px solid var(--line-soft); } .entry:last-child{ border-bottom:1px solid var(--line-soft); } .entry .no{ font-family:var(--f-ui); color:var(--ink-faint); font-size:var(--fs-small); padding-top:.2em; } .entry .body h3{ font-size:var(--fs-h3); font-weight:500; margin-bottom:.4em; } .entry .body h3 a{ transition:color .15s; } .entry .body h3 a:hover{ color:var(--gold-bright); } .entry .body .dek{ color:var(--ink-muted); font-size:.98rem; max-width:60ch; } .entry .body .meta-row{ font-family:var(--f-ui); font-size:var(--fs-meta); color:var(--ink-faint); margin-top:.5em; display:flex; gap:.7em; align-items:center; } .entry .thumb{ aspect-ratio:4/3; border-radius:2px; overflow:hidden; align-self:start; } /* Ink-wash placeholder art (used until real photography is dropped in) */ .inkwash{ width:100%; height:100%; background: radial-gradient(circle at 30% 25%, rgba(201,149,68,.35), transparent 45%), radial-gradient(circle at 75% 70%, rgba(156,59,36,.4), transparent 50%), linear-gradient(160deg, #241B11, #171008); position:relative; } .inkwash::after{ content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(115deg, rgba(239,230,212,.035) 0 2px, transparent 2px 6px); mix-blend-mode:overlay; } /* ========================================================================== ARTICLE / POST PAGE ========================================================================== */ .article-header{ padding:var(--sp-5) 0 var(--sp-4); border-bottom:1px solid var(--line); } .article-header.framed{ border:1px solid var(--line); padding:var(--sp-4); margin:var(--sp-4) 0; } .article-header .tag{ margin-bottom:var(--sp-2); display:inline-block; } .article-header h1{ font-size:var(--fs-h1); max-width:18ch; } .article-header .dek{ font-family:var(--f-body); font-style:italic; color:var(--ink-muted); font-size:1.25rem; max-width:56ch; margin-top:var(--sp-2); } .article-layout{ display:grid; grid-template-columns: var(--rail-w) minmax(0,var(--content-w)); gap:var(--sp-5); padding:var(--sp-5) 0 var(--sp-7); } .rail{ font-family:var(--f-ui); } .rail .block{ padding-bottom:var(--sp-3); margin-bottom:var(--sp-3); border-bottom:1px solid var(--line-soft); } .rail .block:last-child{ border-bottom:none; } .rail .label{ font-size:.72rem; color:var(--ink-faint); letter-spacing:.04em; margin-bottom:.3em; } .rail .value{ font-size:.92rem; color:var(--ink-muted); } .rail .share{ display:flex; gap:.7em; } .rail .share a{ font-size:.85rem; color:var(--ink-muted); border-bottom:1px solid var(--line); } .rail .share a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); } .hero-art{ aspect-ratio:16/9; border-radius:2px; overflow:hidden; margin-bottom:var(--sp-4); } .figcaption{ font-family:var(--f-ui); font-size:var(--fs-meta); color:var(--ink-faint); margin:calc(-1 * var(--sp-3)) 0 var(--sp-4); } .prose{ font-family:var(--f-body); font-size:1.15rem; line-height:1.75; max-width:66ch; } .prose p:first-of-type::first-letter{ font-family:var(--f-display); float:left; font-size:3.6em; line-height:.82; padding:.05em .08em 0 0; color:var(--gold-bright); font-weight:600; } .prose h2{ font-size:1.55rem; margin:1.6em 0 .6em; } .prose h3{ font-size:1.25rem; margin:1.4em 0 .5em; } .prose blockquote{ font-family:var(--f-display); font-style:italic; font-size:1.5rem; line-height:1.4; color:var(--gold-bright); border-left:2px solid var(--red); margin:var(--sp-4) 0; padding:.2em 0 .2em var(--sp-3); } .prose a{ color:var(--gold-bright); border-bottom:1px solid rgba(201,149,68,.4); } .prose a:hover{ border-color:var(--gold-bright); } .prose ul,.prose ol{ padding-left:1.3em; } .prose li{ margin-bottom:.5em; } .byline-block{ display:flex; align-items:center; gap:.8em; margin-top:var(--sp-2); font-family:var(--f-ui); } .byline-block .avatar{ width:38px; height:38px; border-radius:50%; background:linear-gradient(155deg,var(--gold),var(--red)); flex:none; } .byline-block .name{ font-size:.95rem; color:var(--ink); font-weight:500; } .byline-block .role{ font-size:.8rem; color:var(--ink-faint); } .related{ border-top:1px solid var(--line); padding:var(--sp-5) 0 var(--sp-6); } .related h2{ font-size:var(--fs-h3); margin-bottom:var(--sp-3); font-family:var(--f-ui); font-weight:500; color:var(--ink-muted); } .related .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); } .related .card h3{ font-size:1.1rem; font-family:var(--f-display); font-weight:500; margin-bottom:.3em; } .related .card .art{ aspect-ratio:16/10; margin-bottom:.8em; border-radius:2px; overflow:hidden; } .related .card{ display:block; } .related .card .meta{ font-family:var(--f-ui); font-size:var(--fs-meta); color:var(--ink-faint); margin-top:.4em; display:flex; gap:.7em; align-items:center; } /* ========================================================================== FOOTER ========================================================================== */ footer.site{ border-top:1px solid var(--line); padding:var(--sp-4) 0; font-family:var(--f-ui); font-size:.85rem; color:var(--ink-faint); } footer.site .row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-2); } footer.site a{ color:var(--ink-muted); } footer.site a:hover{ color:var(--gold-bright); } footer.site .links{ display:flex; gap:var(--sp-3); } footer.site .legal-line{ font-size:.75rem; color:var(--ink-faint); margin:var(--sp-2) 0 0; padding-top:var(--sp-2); border-top:1px solid var(--line-soft); } footer.site .legal-line a{ color:var(--ink-muted); border-bottom:1px solid var(--line); } footer.site .legal-line a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media(max-width:900px){ .featured{ grid-template-columns:1fr; } .featured .art{ order:1; aspect-ratio:16/9; } .article-layout{ grid-template-columns:1fr; } .rail{ display:flex; flex-wrap:wrap; gap:var(--sp-4); border-bottom:1px solid var(--line); padding-bottom:var(--sp-3); margin-bottom:var(--sp-1); } .rail .block{ border-bottom:none; margin-bottom:0; padding-bottom:0; } .entry{ grid-template-columns:1fr; } .entry .thumb{ order:-1; aspect-ratio:16/9; } .entry .no{ display:none; } .related .grid{ grid-template-columns:1fr; } } @media(max-width:560px){ .masthead .wrap{ gap:var(--sp-2); } .masthead nav{ gap:var(--sp-2); font-size:.85rem; } .prose{ font-size:1.05rem; } } /* placeholder-content marker — remove the outline once real copy is in */ .placeholder{ outline:1px dashed var(--red-bright); outline-offset:4px; } /* ========================================================================== UTILITY / 404 PAGE ========================================================================== */ .cta-row{ display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-3); font-family:var(--f-ui); font-size:1rem; } .cta-row a{ color:var(--gold-bright); border-bottom:1px solid rgba(201,149,68,.4); padding-bottom:2px; } .cta-row a:hover{ border-color:var(--gold-bright); }