/* ==========================================================================
T.R. Srinath portfolio website — theme stylesheet
--------------------------------------------------------------------------
Section map:
1. Font loading (Google Fonts)
2. Theme tokens (:root palette + typography custom properties)
3. Base elements
4. Typography: headings + body
5. Links
6. Navigation bar (white-on-maroon)
7. Buttons
8. Footer
Palette + typography are defined here (task 8.1).
The responsive layout model (breakpoints, :focus-visible) is appended
below this block by task 8.2 — keep base/theme rules above, layout below.
========================================================================== */
/* --------------------------------------------------------------------------
1. Font loading
--------------------------------------------------------------------------
Two families are loaded from Google Fonts: Marcellus (headings) and
Mukta (body). The @import below is the documented loading mechanism and
works without touching every HTML .
Equivalent approach (place in each page's before this
stylesheet if you prefer link-based loading over @import):
If the remote fonts fail to load, the fallback stacks defined in the
--font-* tokens guarantee a defined font is always applied (Req 8.5).
-------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Mukta:wght@400;500;600;700&display=swap");
/* --------------------------------------------------------------------------
2. Theme tokens — single source of truth for palette + typography (Req 8.1, 8.2)
-------------------------------------------------------------------------- */
:root {
/* Palette — exactly 6 colors, traditional Carnatic / temple aesthetic */
--color-maroon: #6B1E1E; /* primary: nav bar, headings, footer */
--color-saffron: #E2711D; /* accent: active state, buttons, link hover */
--color-gold: #C9A227; /* secondary accent: borders, dividers, rules*/
--color-cream: #FBF3E3; /* page background (sandalwood cream) */
--color-surface: #FFFDF8; /* cards, modal, track-list surfaces */
--color-ink: #2B1A14; /* body text (deep brown-black) */
/* On-color text token used for white-on-maroon UI (nav, buttons) */
--color-on-maroon: #FFFFFF;
/* Typography — exactly 2 families, each with a local fallback stack so
no element ever renders with an undefined font (Req 8.5). */
--font-heading: "Marcellus", "Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-body: "Mukta", "Segoe UI", system-ui, Arial, sans-serif;
/* Shared rhythm tokens */
--line-height-body: 1.6;
--rule-gold: 3px solid var(--color-gold);
}
/* --------------------------------------------------------------------------
3. Base elements
--------------------------------------------------------------------------
CSS custom-property fallbacks (the 2nd argument to var()) are supplied on
the page-level background and text so that even if a token were undefined
the page still renders with a defined color from the same palette (Req 8.5).
-------------------------------------------------------------------------- */
body {
margin: 0;
background-color: var(--color-cream, #FBF3E3);
color: var(--color-ink, #2B1A14);
font-family: var(--font-body);
line-height: var(--line-height-body);
font-weight: 400;
}
/* --------------------------------------------------------------------------
4. Typography — headings + body (Req 8.4, 10.6)
--------------------------------------------------------------------------
Headings: maroon text in the heading font. Contrast of maroon (#6B1E1E)
on cream (#FBF3E3) is well above the 3:1 large-text threshold (Req 10.6).
Body: ink on cream/surface exceeds the 4.5:1 body-text threshold.
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--color-maroon, #6B1E1E);
font-weight: 400;
line-height: 1.2;
margin: 0 0 0.5em;
}
/* Page titles (h1, h2) carry a thin gold underline rule as the section motif. */
h1,
h2 {
padding-bottom: 0.3em;
border-bottom: var(--rule-gold);
}
/* Section labels (e.g. Lineage_Section, Recognition_Section): heading font,
uppercase, letter-spaced, with a small gold divider underneath. */
.section-label {
font-family: var(--font-heading);
color: var(--color-maroon, #6B1E1E);
text-transform: uppercase;
letter-spacing: 0.12em;
border-bottom: 2px solid var(--color-gold);
padding-bottom: 0.25em;
}
p {
margin: 0 0 1em;
line-height: var(--line-height-body);
}
/* --------------------------------------------------------------------------
5. Links
--------------------------------------------------------------------------
Body links use maroon (≥4.5:1 on cream/surface); hover/focus shifts to
saffron for an accent without dropping below contrast for normal-size body
text only where the underline + color change keep them identifiable.
-------------------------------------------------------------------------- */
a {
color: var(--color-maroon, #6B1E1E);
text-decoration: underline;
text-decoration-color: var(--color-gold);
}
a:hover,
a:focus {
color: var(--color-saffron, #E2711D);
}
/* --------------------------------------------------------------------------
6. Navigation bar — white on maroon (Req 8.3, 10.6)
--------------------------------------------------------------------------
White (#FFFFFF) on maroon (#6B1E1E) exceeds the 4.5:1 body threshold.
Placement, color, and font family are identical on every page because all
pages link this single stylesheet.
-------------------------------------------------------------------------- */
.site-header {
background-color: var(--color-maroon, #6B1E1E);
color: var(--color-on-maroon, #FFFFFF);
font-family: var(--font-body);
}
.site-nav a {
color: var(--color-on-maroon, #FFFFFF);
text-decoration: none;
font-family: var(--font-body);
}
.site-nav a:hover,
.site-nav a:focus {
color: var(--color-cream, #FBF3E3);
}
/* Persistent active-state indicator: saffron accent rule (Req 1.5). */
.site-nav a.is-active,
.site-nav a[aria-current="page"] {
color: var(--color-on-maroon, #FFFFFF);
border-bottom: 3px solid var(--color-saffron);
}
/* --------------------------------------------------------------------------
7. Buttons — white on maroon, saffron on hover
-------------------------------------------------------------------------- */
.btn {
font-family: var(--font-body);
font-weight: 600;
color: var(--color-on-maroon, #FFFFFF);
background-color: var(--color-maroon, #6B1E1E);
border: 2px solid var(--color-gold);
border-radius: 4px;
padding: 0.6em 1.2em;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.btn:hover,
.btn:focus {
background-color: var(--color-saffron, #E2711D);
color: var(--color-on-maroon, #FFFFFF);
}
/* --------------------------------------------------------------------------
8. Footer — white on maroon, gold top rule
-------------------------------------------------------------------------- */
.site-footer {
background-color: var(--color-maroon, #6B1E1E);
color: var(--color-on-maroon, #FFFFFF);
font-family: var(--font-body);
border-top: var(--rule-gold);
}
.site-footer a {
color: var(--color-cream, #FBF3E3);
}
/* ==========================================================================
END OF THEME (task 8.1).
Task 8.2 appends the responsive layout model and :focus-visible styles
below this line.
========================================================================== */
/* ==========================================================================
RESPONSIVE LAYOUT MODEL (task 8.2)
--------------------------------------------------------------------------
Mobile-first stylesheet implementing Requirement 9 (Responsive Layout) and
Requirement 10.5 (visible keyboard focus indicator).
Section map:
9. Box model + overflow guards (no horizontal scrollbar 320–2560px)
10. Fluid media (images/video stay within their containers)
11. Centered max-width content container
12. Mobile-first base layout (single column, 320–767px)
13. :focus-visible focus indicator for all interactive controls (10.5)
14. Breakpoint: tablet (768–1023px)
15. Breakpoint: desktop multi-column (1024–2560px)
16. Very wide viewports (container stays centered)
Approach: layout is mobile-first. Base rules below the breakpoints target
the 320–767px single-column phone layout (Req 9.3). Media queries layer on
the tablet (Req 9.2) and desktop multi-column (Req 9.1) layouts. Because
the breakpoints are pure CSS media queries, resizing across a breakpoint
re-applies the layout instantly with no page reload (Req 9.5).
========================================================================== */
/* --------------------------------------------------------------------------
9. Box model + overflow guards
--------------------------------------------------------------------------
border-box universally so paddings/borders never add to declared widths
(a common source of horizontal overflow). overflow-x:hidden on the root
and body guarantees no horizontal scrollbar at any width 320–2560px
(Req 9.4, 9.6). width:100% (not 100vw, which ignores the scrollbar gutter)
avoids introducing its own overflow.
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
max-width: 100%;
overflow-x: hidden;
}
/* --------------------------------------------------------------------------
10. Fluid media — images and video never exceed their container (Req 9.4)
--------------------------------------------------------------------------
Images scale down to the width of their box and keep their aspect ratio.
The same treatment is applied to native