/* ================================================================
HOTEL VISHALI — TAMIL TYPOGRAPHY ADDITIONS
Add these @import lines to the very top of your in
index.html, BEFORE your existing Google Fonts link:
Font roles:
• Catamaran → Tamil headings, section titles, bold labels
• Meera Inimai → Decorative Tamil display text (hero, footer)
• Hind Madurai → Tamil body text, descriptions, paragraphs
================================================================ */
/* ── CSS variables for Tamil fonts ── */
:root {
--font-tamil-display: 'Meera Inimai', 'Catamaran', serif;
--font-tamil-heading: 'Catamaran', serif;
--font-tamil-body: 'Hind Madurai', 'Catamaran', sans-serif;
}
/* ================================================================
BASE TAMIL TEXT CLASSES
================================================================ */
/* Large decorative Tamil — hero tagline, footer brand line */
.tamil-display {
font-family: var(--font-tamil-display);
font-size: clamp(1.1rem, 2.2vw, 1.6rem);
font-weight: 400;
color: var(--gold-light);
letter-spacing: 0.06em;
line-height: 1.5;
text-shadow:
0 0 18px rgba(201,168,76,0.45),
0 2px 8px rgba(0,0,0,0.7);
}
/* Tamil section subtitle — shown below English section titles */
.tamil-section-sub {
font-family: var(--font-tamil-heading);
font-size: clamp(0.95rem, 1.8vw, 1.25rem);
font-weight: 600;
color: rgba(240,208,128,0.7);
letter-spacing: 0.04em;
line-height: 1.4;
margin-top: 4px;
display: block;
}
/* Tamil label — small caps-style label above section titles */
.tamil-label {
font-family: var(--font-tamil-heading);
font-size: clamp(0.72rem, 1.1vw, 0.88rem);
font-weight: 700;
color: var(--gold);
letter-spacing: 0.08em;
display: block;
margin-bottom: 4px;
text-shadow: 0 0 10px rgba(201,168,76,0.3);
}
/* Tamil body paragraph text */
.tamil-body {
font-family: var(--font-tamil-body);
font-size: clamp(0.82rem, 1.3vw, 0.95rem);
font-weight: 400;
color: rgba(245,230,204,0.72);
line-height: 1.95;
letter-spacing: 0.02em;
}
/* Tamil name/title inside cards */
.tamil-card-title {
font-family: var(--font-tamil-heading);
font-size: clamp(0.88rem, 1.4vw, 1.05rem);
font-weight: 700;
color: var(--gold-light);
letter-spacing: 0.03em;
line-height: 1.3;
display: block;
margin-top: 3px;
}
/* Location name in Tamil — inside location cards */
.tamil-location-name {
font-family: var(--font-tamil-heading);
font-size: clamp(1.0rem, 1.6vw, 1.2rem);
font-weight: 800;
color: var(--gold-light);
letter-spacing: 0.03em;
line-height: 1.3;
display: block;
margin-top: 2px;
text-shadow: 0 0 14px rgba(240,208,128,0.25);
}
/* Decorative Tamil divider quote — story/hero section */
.tamil-quote {
font-family: var(--font-tamil-display);
font-size: clamp(1.0rem, 1.8vw, 1.3rem);
font-weight: 400;
color: rgba(201,168,76,0.6);
font-style: italic;
text-align: center;
display: block;
padding: 14px 0 6px;
letter-spacing: 0.05em;
position: relative;
}
.tamil-quote::before,
.tamil-quote::after {
content: '';
display: inline-block;
width: 36px;
height: 1px;
background: linear-gradient(to right, transparent, rgba(201,168,76,0.45));
vertical-align: middle;
margin: 0 10px;
}
.tamil-quote::after {
background: linear-gradient(to left, transparent, rgba(201,168,76,0.45));
}
/* Glowing Tamil hero tagline */
.tamil-hero-tag {
font-family: var(--font-tamil-display);
font-size: clamp(1.15rem, 2vw, 1.55rem);
font-weight: 400;
color: var(--gold-light);
letter-spacing: 0.05em;
line-height: 1.5;
display: block;
margin: 10px 0 22px;
text-shadow:
0 0 22px rgba(201,168,76,0.55),
0 0 50px rgba(201,168,76,0.2),
0 2px 6px rgba(0,0,0,0.8);
animation: tamil-glow 3.5s ease-in-out infinite;
}
@keyframes tamil-glow {
0%, 100% { text-shadow: 0 0 22px rgba(201,168,76,0.55), 0 2px 6px rgba(0,0,0,0.8); }
50% { text-shadow: 0 0 36px rgba(201,168,76,0.85), 0 0 70px rgba(201,168,76,0.3), 0 2px 6px rgba(0,0,0,0.8); }
}
/* Tamil footer tagline */
.tamil-footer-tag {
font-family: var(--font-tamil-display);
font-size: clamp(0.85rem, 1.3vw, 1.02rem);
font-weight: 400;
color: rgba(240,208,128,0.55);
letter-spacing: 0.04em;
line-height: 1.6;
margin-top: 4px;
display: block;
}
/* Tamil review text */
.tamil-review {
font-family: var(--font-tamil-body);
font-size: 0.83rem;
font-weight: 400;
color: rgba(245,230,204,0.72);
line-height: 1.8;
font-style: normal;
}
/* Tamil badge — inside service/tag elements */
.tamil-badge {
font-family: var(--font-tamil-heading);
font-size: 0.72rem;
font-weight: 600;
color: var(--gold);
background: rgba(201,168,76,0.08);
border: 1px solid rgba(201,168,76,0.22);
border-radius: 3px;
padding: 2px 8px;
display: inline-block;
letter-spacing: 0.02em;
}
/* ================================================================
SECTION-SPECIFIC OVERRIDES
================================================================ */
/* Hero — Tamil tagline below the English hero-tagline */
.hero-content .tamil-hero-tag {
text-align: left;
}
@media (max-width: 768px) {
.hero-content .tamil-hero-tag {
text-align: center;
}
}
/* Story section Tamil paragraph */
.story-text .tamil-body {
margin-top: 8px;
margin-bottom: 16px;
border-left: 2px solid rgba(201,168,76,0.25);
padding-left: 12px;
}
/* Location card Tamil name */
.location-card-header .tamil-location-name {
font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}
/* Contact form Tamil label */
.form-group .tamil-label {
font-size: 0.78rem;
margin-bottom: 5px;
color: rgba(240,208,128,0.6);
}
/* Section header Tamil sub — sits right below .section-title */
.section-header .tamil-section-sub {
margin-top: 6px;
display: block;
opacity: 0.82;
}
/* Sidebar Tamil text */
.sidebar-nav-label.tamil-label {
font-size: 0.68rem;
color: rgba(240,208,128,0.45);
letter-spacing: 0.12em;
}
/* Mobile size adjustments */
@media (max-width: 480px) {
.tamil-display { font-size: 1.05rem; }
.tamil-hero-tag { font-size: 1.0rem; }
.tamil-section-sub { font-size: 0.9rem; }
.tamil-location-name{ font-size: 1.0rem; }
.tamil-body { font-size: 0.8rem; line-height: 1.85; }
.tamil-card-title { font-size: 0.82rem; }
.tamil-footer-tag { font-size: 0.78rem; }
}