/* Whenever I edit this file, I have to edit Anuchchhed.css as well. */ /* The most I M P O R T A N T note: Firefox does not allow us to load woff files from another domain; read: Cross-Origin Resource Sharing - Fonts etc_.odt The folowing font-face 'Akhil HE' will not be in Anuchchhed.css. Anuchchhed.css will only use default fonts, while this file wof-akhil-he.css will use the font Akhil HE that I designed. The skeleton.css that I downloaded will also have following font-face. */ @font-face { font-family: 'Akhil HE'; src: url('Akhil_HE.woff2') format('woff2'), url('Akhil_HE.woff') format('woff'); font-display: swap; /* optional but recommended */ } /* -nrj-ltn here is used for neerajaa-latin as Akhil HE does have glyph for all the modified Latin used in neerajaa-latin we will let the browser decide which font to be used we only need to decrease the size of the font to match with smaller Latin glyphs of Akhil HE */ /* This file will have mainly Semantic tags which not only style content but also convey the meaning and structure of documents these tags don't style/define layouts of the documents. */ /* This style sheet should not be used with Anuchchhed.css or saral-shailee.css they also contains similar tags! */ /* This file should be used alongwith chitra.css and khaaka.css if required */ /* ONLY Typography and text styles for */ body { font-family: 'Akhil HE', 'Arial', sans-serif; color: #000F0F; font-weight: normal; /* Akhil HE at present has only one version i.e. normal */ } /* Simple Table styles */ /* Stylish table styles are in taalikaa.css */ table { font-size: 1.4rem; line-height: 1.28; margin-left: 0.6rem; /* was 0.1in */ margin-right: 0.42rem; /* was 0.07in */ } .big-table { font-size: 1.6rem; line-height: 1.28; } th, td { vertical-align: top; } /* most of the following tags "may not have left or right margins/paddings" this will ensure they left or right align with each other! */ /* List styles */ ol, ul { font-size: 1.4rem; line-height: 1.28; margin-top: 0.6rem; /* was 0.1in */ margin-bottom: 0.6rem; /* was 0.1in */ } li { font-size: 1.4rem; line-height: 1.28; margin-top: 0.3rem; /* was 0.05in */ margin-bottom: 0.3rem; /* was 0.05in */ } /* Text paras & headings styles */ em { font-style: normal; color: #884444; } /* Base paragraph style */ p { font-size: 1.4rem; line-height: 1.28; margin: 0.6rem 0; /* 0.1in */ text-align: left; } /* Variants */ p.imp { color: #DD4400; } p.right { text-align: right; } p.big { font-size: 1.5rem; line-height: 1.28; } p.small { font-size: 1.2rem; line-height: 1.28; margin: 0.48rem 0; } p.sheerSh { font-size: 1.3rem; line-height: 1.28; margin: 0.9rem 0 0.54rem; } p.paaNnv { font-size: 1.3rem; line-height: 1.28; margin: 0.54rem 0 0.12rem; } /* Transliteration adjustments */ p.nrj-ltn { font-size: 1.0rem; } p.big.nrj-ltn { font-size: 1.1rem; } p.small.nrj-ltn { font-size: 0.8rem; } /* Base heading style */ h1, h2, h3, h4, h5, h6 { color: #403020; font-weight: normal; } /* Headings: adjust margins to ensure clearer spacing */ h1 { font-size: 2.3rem; line-height: 1.28; margin: 1.4rem 0 0.6rem; } h2 { font-size: 2.0rem; line-height: 1.28; margin: 1.0rem 0 0.5rem; } h3 { font-size: 1.8rem; line-height: 1.28; margin: 0.8rem 0 0.4rem; } h4 { font-size: 1.6rem; line-height: 1.28; margin: 0.6rem 0 0.3rem; } h5 { font-size: 1.5rem; line-height: 1.28; margin: 0.6rem 0 0.3rem; } h6 { font-size: 1.4rem; line-height: 1.28; margin: 0.5rem 0 0.25rem; } /* Smaller variants */ h1.small { font-size: 1.9rem; line-height: 1.28; margin: 1.4rem 0 0.6rem; } h2.small { font-size: 1.6rem; line-height: 1.28; margin: 1.0rem 0 0.5rem; } h3.small { font-size: 1.4rem; line-height: 1.28; margin: 0.8rem 0 0.4rem; } /* Latin transliteration variants */ .h1-nrj-ltn { font-size: 1.7rem; } .h2-nrj-ltn { font-size: 1.3rem; } .h3-nrj-ltn, .h4-nrj-ltn, .h5-nrj-ltn { font-size: 1.1rem; } .h6-nrj-ltn { font-size: 1.0rem; } /* Hypertext styles */ a:link { color: #663333; text-decoration: none; } a:visited { color: #996666; text-decoration: none; } a:hover { color: #880088; text-decoration: none; } a:active { color: blue; background-color: #BBBBBB; text-decoration: none; } /* generally not consistently visible due to their momentary nature */ /* Underline class for spans */ span.underline { text-decoration: underline; } /* Apply styles to the

element */

textarea {
	width: 100%;
	margin: 0.19rem 0;				/* was 3px → 0.1875rem (rounded) */
	padding: 0.31rem;				/* was 5px → 0.3125rem */
	font-size: 1.6rem;
	border: 0.19rem solid #007bff;	/* fixed: was border-color only; 3px → 0.1875rem */
	border-radius: 0.12rem;			/* was 2px → 0.125rem */
	box-sizing: border-box;
	resize: vertical;				/* Allow vertical resizing */
}

/* Optional: Add hover effect */

textarea:hover {
	border-color: #0056b3;
}

/* Form styles */

form {
	margin-top: 0.12rem;		/* was 2px → 0.125rem */
	margin-bottom: 0.12rem;		/* was 2px → 0.125rem */
}

label {
	font-size: 1.5rem;
	margin-top: 0.31rem;		/* was 5px → 0.3125rem */
	margin-bottom: 0.5rem;		/* was 8px → 0.5rem */
	margin-right: 0.62rem;		/* was 10px → 0.625rem */
	margin-left: 0;
	color: #333;
}

/* Style for the OK button */

input[type="submit"] {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 0.62rem 1rem;		/* was 10px 16px → 0.625rem 1rem */
	font-size: 1.5rem;
	cursor: pointer;
	margin-top: 0.31rem;		/* was 5px → 0.3125rem */
	margin-bottom: 0.31rem;
	margin-right: 0;
	margin-left: 0;
}

/* Hover effect */

input[type="submit"]:hover {
	background-color: #0056b3;
}

/* Style for input[type="text"] */

input[type="text"] {
	border: 0.06rem solid #ccc;		/* was 1px → 0.0625rem */
	border-radius: 0.25rem;			/* was 4px → 0.25rem */
	padding: 0.38rem 0.62rem;		/* was 6px 10px → 0.375rem 0.625rem */
	font-size: 1.4rem;
	margin-top: 0.12rem;			/* was 2px → 0.125rem */
	margin-bottom: 0.12rem;
	margin-right: 0;
	margin-left: 0;
}

/* Style for input[type="email"] */

input[type="email"] {
	border: 0.06rem solid #ccc;		/* was 1px → 0.0625rem */
	border-radius: 0.25rem;			/* was 4px → 0.25rem */
	padding: 0.38rem 0.62rem;		/* was 6px 10px → 0.375rem 0.625rem */
	font-size: 1.4rem;
	width: 24ch;
	margin-top: 0.31rem;			/* was 5px → 0.3125rem */
	margin-bottom: 0.31rem;
	margin-right: 1.25rem;			/* was 20px → 1.25rem */
	margin-left: 0;
}

/* Hover effect for input[type="text"] */

input[type="text"]:hover,
input[type="text"]:focus {
	border-color: #007bff;
}

/* Following are not Semantic tags but .. */

/* We need an input container wide enough to
	hold the url 
	and not that crosses the container */

.input-container {
	width: 37.5rem; /* was 600px → 600/16 = 37.5rem */
}

.input-container input[type="text"] {
	width: 100%;
}

/* Universal styles */

.center {
    text-align: center;
}

/* 'center' to be deleted in future and only 'madhya' is to be used */

.madhya {
    text-align: center;
}

/* AdhoAntar = margin-bottom */

.AdhoAntar {
  margin-bottom: 1.2rem; /* was 0.2in */
}

.AdhoAntar-0_2in {
  margin-bottom: 1.2rem; /* was 0.2in */
}

.AdhoAntar-0_3in {
  margin-bottom: 1.8rem; /* was 0.3in */
}

/* OONnchaaEE line-heights */
.OONnchaaEE-0_2in {
  line-height: 1.2rem; /* was 0.2in */
}

.OONnchaaEE-0_3in {
  line-height: 1.8rem; /* was 0.3in */
}

strong {
	font-weight: normal;
	background-color: #faff70;	/* Greenish-yellow highlight */
	color: #000000;
	padding: 0.1em 0.2em;
	border-radius: 0.12rem;		/* It was 2px → 0.125rem */
}

h1, h2, h3, h4 {
  background: linear-gradient(180deg, #884400, #AA5500); /* gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #884400;
}

.dim {
  opacity: 0.75;
  font-style: italic;
}

.vspace-1 { height: 1rem; }
.vspace-2 { height: 2rem; }
.vspace-3 { height: 3rem; }

dl {
  margin: 0;
  padding: 0;
}

dt {
  font-weight: bold;
  font-size: 1.5rem; 
  margin-top: 0.6rem;
}

dd {
  color: #333;
  font-size: 1.3rem;
  line-height: 1.28;
  margin: 0.2rem 0 0.8rem 1.5rem;
}

/* useful for displaying Unicode characters not present in Akhil HE from default font like Arial */
/* not necessary in Anuchchhed but kept to there to provide easy switch between these style sheets */
/* .smaller { font-size: smaller; } deprecated - to be deleted in 2026 */

.smaller {
  font-size: smaller; /* one step smaller = about 87.5% */
}

.smaller-1 {
  font-size: 0.875em; /* one step smaller = 87.5% */
}

.smaller-2 {
  font-size: 0.75em;  /* two steps smaller = 75% */
}

/* increases space between characters */

.loose-letter-spacing-1 {
  letter-spacing: 0.1em;
}

.loose-letter-spacing-2 {
  letter-spacing: 0.1em;
}

.loose-letter-spacing-3 {
  letter-spacing: 0.1em;
}

/* Words within lang="hi-Latn" will only break at explicit spaces 
                                 (not within long words or at syllables) */
/* If we ever want to add a manual line break, we can use <wbr> or  (soft hyphens); */

[lang="hi-Latn"] {
	word-break: keep-all;
	hyphens: manual;
}

/* Show/hide alternative text lengths:
   - By default, show the longer version and hide the short one
   - On smaller screens (≤400px), swap: show short, hide long
   This keeps both texts in HTML for SEO + accessibility */

.short { display: none; }
.long { display: inline; }

@media (max-width: 400px) {
  .short { display: inline; }
  .long { display: none; }
}

/* common overrides to Pure (for Side-menu layout) are in:
   our-overrides-on-pure.css
   
   following are overrides to reduce space between list item which 
   increases because of selection of Akhil HE
   
   So this will not be in the Anuchchhed.css.
																*/

.pure-menu-link {
  line-height: 1.28;			/* same as inherited! */
  padding-top: 0;			/* decrease vertical padding */
  padding-bottom: 0;
}

.pure-menu-list {
  margin: 0;
  padding: 0;
}

/*	For our Font

Slightly Increase line-height for Devanagari text runs [on multiple lines].
	Devanagari characters have matras above and below the baseline,
	so extra vertical spacing (1.36 × font-size) improves readability.
	Latin text is usually fine with tighter spacing.					*/

span.incr-ln-ht-nagari {
  line-height: 1.28;
}