/* ========================================================= Ramamurthy Nagar Christian Fellowship Global stylesheet --------------------------------------------------------- 1. Tokens 6. Buttons & links 2. Reset/base 7. Sections & components 3. Typography 8. Media placeholders 4. Layout 9. Footer 5. Header/nav 10. Responsive ========================================================= */ /* ---------- 1. Tokens ---------- */ :root { /* Brand */ --ink: #0b1b2b; /* deep midnight blue */ --ink-2: #12293f; --night: #071522; --gold: #c9a227; --gold-soft: #e8d9a4; --cream: #faf7f0; --cream-2: #f3ede1; --paper: #ffffff; --line: #e4dccb; --line-dark: rgba(232, 217, 164, .22); /* Text */ --text: #1f2a35; --text-soft: #57657a; --text-invert:#f4efe3; --text-invert-soft: rgba(244, 239, 227, .72); /* Type */ --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Space */ --gutter: clamp(20px, 5vw, 56px); --section: clamp(64px, 9vw, 128px); --maxw: 1200px; --maxw-narrow: 760px; /* Effects */ --radius: 4px; --radius-lg: 14px; --arch: 50% 50% 6px 6px / 42% 42% 6px 6px; /* church-window arch */ --shadow-sm: 0 2px 10px rgba(11, 27, 43, .06); --shadow: 0 18px 44px -22px rgba(11, 27, 43, .38); --shadow-lg: 0 34px 80px -34px rgba(11, 27, 43, .52); --ease: cubic-bezier(.22, .61, .36, 1); } /* ---------- 2. Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; background: var(--cream); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* No overflow-x on /: it turns them into scroll containers and breaks position:sticky. Anything that could bleed sideways is clipped at the component level instead (see .arch-frame below). */ img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button { font: inherit; color: inherit; } ::selection { background: var(--gold-soft); color: var(--ink); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } /* Visually hidden, still available to screen readers. Uses clip-path rather than left:-9999px, which inflates the document's scroll width. */ .sr-only, .skip-link { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 0; left: 0; z-index: 200; width: auto; height: auto; margin: 0; padding: 12px 20px; clip-path: none; overflow: visible; background: var(--ink); color: var(--text-invert); border-radius: 0 0 var(--radius) 0; } /* ---------- 3. Typography ---------- */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.14; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--ink); } h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); font-weight: 400; } h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); } h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); } h4 { font-size: 1.12rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .8; } .eyebrow.is-centered { justify-content: center; } .eyebrow.is-centered::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .8; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--text-soft); line-height: 1.75; } .verse { font-family: var(--serif); font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.42; font-style: italic; font-weight: 300; } .verse-ref { display: block; margin-top: 18px; font-family: var(--sans); font-style: normal; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .text-center { text-align: center; } .muted { color: var(--text-soft); } /* ---------- 4. Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: var(--maxw-narrow); } .section { padding-block: var(--section); position: relative; } .section-head { max-width: 660px; margin-bottom: clamp(36px, 5vw, 60px); } .section-head.is-centered { margin-inline: auto; text-align: center; } .section--dark { background: var(--ink); color: var(--text-invert); } .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-invert); } .section--dark .lead, .section--dark .muted { color: var(--text-invert-soft); } .section--tint { background: var(--cream-2); } .section--paper { background: var(--paper); } .grid { display: grid; gap: clamp(20px, 2.6vw, 34px); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 84px); align-items: center; } .split--media-right .split__media { order: 2; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } .section--dark .rule { background: var(--line-dark); } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } /* ---------- 5. Header / nav ---------- */ .topbar { background: var(--night); color: var(--text-invert-soft); font-size: .8rem; letter-spacing: .02em; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 42px; flex-wrap: wrap; } .topbar a { color: inherit; text-decoration: none; } .topbar a:hover { color: var(--gold-soft); } .topbar__list { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .topbar__langs { color: var(--gold-soft); letter-spacing: .06em; } /* Language switcher */ .langs { display: flex; align-items: center; gap: 2px; } .lang { background: none; border: 0; cursor: pointer; color: var(--text-invert-soft); font: inherit; font-size: .78rem; letter-spacing: .04em; line-height: 1; padding: 6px 10px; border-radius: 999px; transition: color .25s var(--ease), background-color .25s var(--ease); } .lang + .lang { position: relative; } .lang + .lang::before { content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background: rgba(244, 239, 227, .22); } .lang:hover { color: var(--gold-soft); } .lang:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .lang[aria-pressed="true"] { color: #21190a; background: var(--gold-soft); font-weight: 600; } .lang[aria-pressed="true"]::before, .lang[aria-pressed="true"] + .lang::before { opacity: 0; } /* Indic scripts get their own faces — Cormorant and Inter have no Tamil, Kannada or Devanagari glyphs and would fall back to a mismatched system font. */ html[lang="ta"] { --serif: "Noto Serif Tamil", "Latha", serif; --sans: "Noto Sans Tamil", "Latha", sans-serif; } html[lang="kn"] { --serif: "Noto Serif Kannada", "Tunga", serif; --sans: "Noto Sans Kannada", "Tunga", sans-serif; } html[lang="hi"] { --serif: "Noto Serif Devanagari", "Mangal", serif; --sans: "Noto Sans Devanagari", "Mangal", sans-serif; } /* Indic glyphs carry taller ascenders and descenders, so the display sizes that suit Cormorant need a little more room to breathe. */ html[lang="ta"] h1, html[lang="kn"] h1, html[lang="hi"] h1, html[lang="ta"] h2, html[lang="kn"] h2, html[lang="hi"] h2, html[lang="ta"] h3, html[lang="kn"] h3, html[lang="hi"] h3 { line-height: 1.28; letter-spacing: 0; } html[lang="ta"] .eyebrow, html[lang="kn"] .eyebrow, html[lang="hi"] .eyebrow, html[lang="ta"] .crumbs, html[lang="kn"] .crumbs, html[lang="hi"] .crumbs { letter-spacing: .08em; text-transform: none; } html[lang="ta"] .btn, html[lang="kn"] .btn, html[lang="hi"] .btn { letter-spacing: .02em; text-transform: none; } /* Wide tracking and small-caps sizing suit Latin labels but break Indic conjuncts apart and render them too small to read. Reset both, and give the tiny labels a little more size. */ html[lang="ta"] .brand__sub, html[lang="kn"] .brand__sub, html[lang="hi"] .brand__sub, html[lang="ta"] .stat__label, html[lang="kn"] .stat__label, html[lang="hi"] .stat__label, html[lang="ta"] .card__meta, html[lang="kn"] .card__meta, html[lang="hi"] .card__meta, html[lang="ta"] .time-row__day, html[lang="kn"] .time-row__day, html[lang="hi"] .time-row__day, html[lang="ta"] .field label, html[lang="kn"] .field label, html[lang="hi"] .field label, html[lang="ta"] .info-box dt, html[lang="kn"] .info-box dt, html[lang="hi"] .info-box dt, html[lang="ta"] .footer h4, html[lang="kn"] .footer h4, html[lang="hi"] .footer h4, html[lang="ta"] .event__date .m, html[lang="kn"] .event__date .m, html[lang="hi"] .event__date .m { letter-spacing: .01em; text-transform: none; } html[lang="ta"] .brand__sub, html[lang="kn"] .brand__sub, html[lang="hi"] .brand__sub { font-size: .74rem; margin-top: 1px; } html[lang="ta"] .footer h4, html[lang="kn"] .footer h4, html[lang="hi"] .footer h4, html[lang="ta"] .field label, html[lang="kn"] .field label, html[lang="hi"] .field label, html[lang="ta"] .info-box dt, html[lang="kn"] .info-box dt, html[lang="hi"] .info-box dt { font-size: .84rem; } html[lang="ta"] .eyebrow, html[lang="kn"] .eyebrow, html[lang="hi"] .eyebrow { font-size: .82rem; } html[lang="ta"] .lang, html[lang="kn"] .lang, html[lang="hi"] .lang { letter-spacing: 0; } /* Translated button labels are long sentences rather than two English words. `white-space: nowrap` turns them into one unbreakable box that widens its whole grid column, so let them wrap and stay centred. */ html[lang="ta"] .btn, html[lang="kn"] .btn, html[lang="hi"] .btn, html[lang="ta"] .time-row__when, html[lang="kn"] .time-row__when, html[lang="hi"] .time-row__when { white-space: normal; text-align: center; } /* These display-size labels hold short English words ("Care", "Word"). The translations are whole words in a wider script, so at 2.9rem they no longer fit their grid column. */ html[lang="ta"] .stat__num, html[lang="kn"] .stat__num, html[lang="hi"] .stat__num { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.25; } /* Grid and flex children default to min-width:auto, so a single long word can push its whole column wider than the screen. Letting the tracks shrink is the actual fix; the wrap rule then breaks the word instead of the layout. Applies in every language — the translations just made it visible. */ .split > *, .grid > *, .times > *, .card, .tile, .event > *, .footer__top > *, .belief-list li > *, .time-row > *, .info-box dd, .person > * { min-width: 0; } html[lang="ta"] body, html[lang="kn"] body, html[lang="hi"] body { overflow-wrap: break-word; } /* Brief dimming while a translation file is fetched. */ html.lang-loading body { opacity: .55; transition: opacity .15s linear; } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(250, 247, 240, .92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .3s var(--ease), background .3s var(--ease); } .site-header.is-stuck { box-shadow: var(--shadow-sm); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; } .brand { display: flex; align-items: center; gap: 13px; text-decoration: none; flex-shrink: 0; } .brand__mark { width: 42px; height: 42px; flex-shrink: 0; } .brand__text { display: flex; flex-direction: column; line-height: 1.12; } .brand__name { font-family: var(--serif); font-size: 1.24rem; font-weight: 600; color: var(--ink); letter-spacing: .01em; } .brand__sub { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 3px; } .nav { display: flex; align-items: center; gap: 6px; } .nav a { position: relative; text-decoration: none; padding: 10px 13px; border-radius: var(--radius); font-size: .88rem; font-weight: 500; color: var(--text); transition: color .25s var(--ease); } .nav a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav a:hover { color: var(--ink); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); } .nav a[aria-current="page"] { color: var(--ink); font-weight: 600; } .nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); width: 46px; height: 42px; cursor: pointer; align-items: center; justify-content: center; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 20px; height: 1.6px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s var(--ease); } .nav-toggle span { position: relative; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } /* ---------- 6. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border-radius: 999px; font-size: .86rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--gold); color: #21190a; box-shadow: 0 10px 26px -12px rgba(201, 162, 39, .8); } .btn--primary:hover { background: #d9b437; } .btn--dark { background: var(--ink); color: var(--text-invert); } .btn--dark:hover { background: var(--ink-2); } .btn--ghost { border-color: rgba(244, 239, 227, .38); color: var(--text-invert); } .btn--ghost:hover { border-color: var(--gold-soft); background: rgba(244, 239, 227, .08); } .btn--outline { border-color: var(--ink); color: var(--ink); } .btn--outline:hover { background: var(--ink); color: var(--text-invert); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .btn-row.is-centered { justify-content: center; } .link-arrow { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; font-size: .84rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); } .link-arrow::after { content: "→"; transition: transform .28s var(--ease); color: var(--gold); font-size: 1.05rem; } .link-arrow:hover::after { transform: translateX(6px); } .section--dark .link-arrow { color: var(--gold-soft); } /* ---------- 7. Components ---------- */ /* Hero */ .hero { position: relative; min-height: min(88vh, 820px); display: flex; align-items: center; background: var(--night); color: var(--text-invert); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media video, .hero__media img, .hero__media .ph { width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; z-index: 1; /* Weighted to the left, where the headline sits, so the footage itself stays visible on the right. A flat overlay dark enough to carry the text would crush the whole shot to near-black. */ background: linear-gradient(180deg, rgba(7,21,34,.38) 0%, rgba(7,21,34,0) 26%, rgba(7,21,34,0) 60%, rgba(7,21,34,.58) 100%), linear-gradient(90deg, rgba(7,21,34,.84) 0%, rgba(7,21,34,.66) 38%, rgba(7,21,34,.40) 58%, rgba(7,21,34,.16) 100%), radial-gradient(120% 80% at 50% 0%, rgba(201,162,39,.10) 0%, transparent 60%); } @media (max-width: 860px) { /* Narrow screens: the text spans the full width, so darken vertically instead of from the left. */ .hero__scrim { background: linear-gradient(180deg, rgba(7,21,34,.62) 0%, rgba(7,21,34,.44) 40%, rgba(7,21,34,.78) 100%), radial-gradient(120% 80% at 50% 0%, rgba(201,162,39,.10) 0%, transparent 60%); } } .hero__inner { position: relative; z-index: 2; padding-block: clamp(90px, 13vw, 150px); } .hero__content { max-width: 780px; } .hero h1 { color: var(--text-invert); text-wrap: balance; } .hero .eyebrow { color: var(--gold-soft); } .hero__lead { color: var(--text-invert-soft); font-size: clamp(1.05rem, 1.8vw, 1.28rem); max-width: 560px; } .hero__meta { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line-dark); font-size: .84rem; color: var(--text-invert-soft); } .hero__meta strong { color: var(--gold-soft); font-weight: 600; letter-spacing: .04em; } /* Page banner (interior pages) */ .page-hero { position: relative; background: var(--ink); color: var(--text-invert); overflow: hidden; } .page-hero__media { position: absolute; inset: 0; opacity: .34; } .page-hero__media img, .page-hero__media .ph { width: 100%; height: 100%; object-fit: cover; } .page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,27,43,.62), rgba(11,27,43,.92)); } .page-hero__inner { position: relative; z-index: 2; padding-block: clamp(70px, 10vw, 122px); max-width: 720px; } .page-hero h1 { color: var(--text-invert); font-size: clamp(2.3rem, 5vw, 3.6rem); } .page-hero p { color: var(--text-invert-soft); } .crumbs { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 20px; } .crumbs a { text-decoration: none; opacity: .8; } .crumbs a:hover { opacity: 1; } /* Verse band */ .verse-band { background: var(--ink-2); color: var(--text-invert); text-align: center; padding-block: clamp(52px, 7vw, 86px); position: relative; overflow: hidden; } .verse-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 0%, rgba(201,162,39,.14), transparent 70%); } .verse-band .wrap { position: relative; } /* Cards */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--gold-soft); } .card__media { position: relative; aspect-ratio: 16 / 9; background: var(--cream-2); overflow: hidden; } .card__media img, .card__media .ph { width: 100%; height: 100%; object-fit: cover; } .card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; } .card__meta { font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 12px; } .card h3 { margin-bottom: 10px; } .card p { color: var(--text-soft); font-size: .95rem; } .card__foot { margin-top: auto; padding-top: 20px; } .card--flat { background: transparent; border: 0; } .card--flat:hover { transform: none; box-shadow: none; } /* Play badge over video thumbs */ .play-badge { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; background: linear-gradient(180deg, rgba(7,21,34,.1), rgba(7,21,34,.45)); transition: background .3s var(--ease); } .play-badge span { width: 60px; height: 60px; border-radius: 50%; background: rgba(250,247,240,.94); color: var(--ink); display: grid; place-items: center; font-size: 1rem; padding-left: 4px; box-shadow: var(--shadow); transition: transform .3s var(--ease); } .card:hover .play-badge span { transform: scale(1.09); } /* Service times */ .times { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); } .time-row { display: grid; grid-template-columns: 190px 1fr auto; gap: 18px; align-items: center; padding: 24px 28px; border-bottom: 1px solid var(--line); transition: background .25s var(--ease); } .time-row:last-child { border-bottom: 0; } .time-row:hover { background: var(--cream); } .time-row__day { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); } .time-row__what { color: var(--text-soft); font-size: .96rem; } .time-row__what strong { color: var(--text); display: block; font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-bottom: 2px; } .time-row__when { font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; } /* Feature list / beliefs */ .belief-list { counter-reset: b; display: grid; gap: 4px; } .belief-list li { list-style: none; counter-increment: b; display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); } .belief-list li::before { content: counter(b, decimal-leading-zero); font-family: var(--serif); font-size: 1.5rem; color: var(--gold); line-height: 1; } .section--dark .belief-list li { border-color: var(--line-dark); } /* Stats */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--line); } .stat__num { font-family: var(--serif); font-size: clamp(2.1rem, 4vw, 2.9rem); color: var(--ink); line-height: 1; } .stat__label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); margin-top: 9px; } /* Ministry tile */ .tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; display: flex; align-items: flex-end; text-decoration: none; color: var(--text-invert); background: var(--ink); } .tile img, .tile .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,21,34,0) 30%, rgba(7,21,34,.85) 100%); } .tile:hover img, .tile:hover .ph { transform: scale(1.06); } .tile__body { position: relative; z-index: 2; padding: 26px; } .tile__body h3 { color: var(--text-invert); margin-bottom: 6px; font-size: 1.35rem; } .tile__body p { color: var(--text-invert-soft); font-size: .88rem; margin: 0; } /* Arched media frame (church window motif) */ .arch-frame { position: relative; } .arch-frame__img { border-radius: var(--arch); overflow: hidden; aspect-ratio: 3 / 4; background: var(--cream-2); box-shadow: var(--shadow-lg); } .arch-frame__img img, .arch-frame__img .ph { width: 100%; height: 100%; object-fit: cover; } .arch-frame::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--gold); border-radius: var(--arch); z-index: -1; } /* Video frame */ .video-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); box-shadow: var(--shadow-lg); } .video-frame video { width: 100%; height: 100%; object-fit: cover; } /* Event list */ .event { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); } .event:first-of-type { border-top: 1px solid var(--line); } .section--dark .event { border-color: var(--line-dark); } .event__date { text-align: center; border: 1px solid var(--gold); border-radius: var(--radius); padding: 10px 6px; color: var(--gold); } .event__date .d { display: block; font-family: var(--serif); font-size: 1.75rem; line-height: 1; } .event__date .m { display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; margin-top: 5px; } .event__title { font-family: var(--serif); font-size: 1.4rem; color: inherit; margin: 0 0 5px; } .event__desc { font-size: .92rem; color: var(--text-soft); margin: 0; } .section--dark .event__desc { color: var(--text-invert-soft); } /* Gallery strip */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1 / 1; background: var(--cream-2); } .gallery figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .gallery img, .gallery .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .gallery figure:hover img, .gallery figure:hover .ph { transform: scale(1.05); } /* Quote band with bg image */ .quote-band { position: relative; overflow: hidden; background: var(--night); color: var(--text-invert); } .quote-band__media { position: absolute; inset: 0; opacity: .3; } .quote-band__media img, .quote-band__media .ph { width: 100%; height: 100%; object-fit: cover; } .quote-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,21,34,.94), rgba(7,21,34,.6)); } .quote-band .wrap { position: relative; z-index: 2; padding-block: clamp(70px, 10vw, 130px); } /* Person card */ .person { text-align: center; } .person__photo { aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--cream-2); margin: 0 auto 22px; max-width: 220px; border: 1px solid var(--line); } .person__photo img, .person__photo .ph { width: 100%; height: 100%; object-fit: cover; } .person h3 { margin-bottom: 4px; font-size: 1.3rem; } .person__role { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; } .person p { font-size: .93rem; color: var(--text-soft); margin-top: 12px; } /* Filter chips */ .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .chip { border: 1px solid var(--line); background: var(--paper); padding: 9px 20px; border-radius: 999px; cursor: pointer; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--text-soft); transition: all .25s var(--ease); } .chip:hover { border-color: var(--gold); color: var(--ink); } .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--text-invert); } /* Accordion */ .acc { border-top: 1px solid var(--line); } .acc__item { border-bottom: 1px solid var(--line); } .acc__btn { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 24px 44px 24px 0; position: relative; font-family: var(--serif); font-size: 1.25rem; color: var(--ink); } .acc__btn::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 1.5rem; font-family: var(--sans); transition: transform .3s var(--ease); } .acc__btn[aria-expanded="true"]::after { content: "−"; } .acc__panel { display: none; padding: 0 0 26px; color: var(--text-soft); max-width: 68ch; } .acc__panel.is-open { display: block; } /* Forms */ .form { display: grid; gap: 18px; } .field { display: grid; gap: 8px; } .field label { font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--text-soft); } .field input, .field textarea, .field select { font: inherit; font-size: .96rem; color: var(--text); padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); width: 100%; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.16); } .form-note { font-size: .82rem; color: var(--text-soft); } .form-status { font-size: .9rem; padding: 12px 16px; border-radius: var(--radius); display: none; } .form-status.is-visible { display: block; } .form-status[data-state="ok"] { background: rgba(201,162,39,.12); border: 1px solid var(--gold-soft); color: var(--ink); } /* Newsletter band */ .newsletter { background: var(--ink); color: var(--text-invert); } .newsletter .inline-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } .newsletter .inline-form input { flex: 1 1 260px; padding: 15px 18px; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(244,239,227,.06); color: var(--text-invert); } .newsletter .inline-form input::placeholder { color: rgba(244,239,227,.5); } .newsletter .inline-form input:focus { outline: none; border-color: var(--gold); } /* Info box */ .info-box { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 26px 28px; } .info-box h4 { margin-bottom: 8px; } .info-box dl { margin: 0; display: grid; gap: 12px; } .info-box dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; } .info-box dd { margin: 3px 0 0; color: var(--text-soft); } /* Map placeholder */ .map-frame { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--cream-2); border: 1px solid var(--line); } .map-frame iframe { width: 100%; height: 100%; border: 0; } /* CTA band */ .cta-band { text-align: center; } .cta-band h2 { max-width: 16ch; margin-inline: auto; } /* ---------- 8. Media placeholders ---------- */ .ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; width: 100%; min-height: 100%; padding: 18px; background: repeating-linear-gradient(135deg, rgba(11,27,43,.045) 0 12px, transparent 12px 24px), var(--cream-2); border: 1px dashed rgba(11,27,43,.22); color: rgba(11,27,43,.62); font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; line-height: 1.5; } .ph__ref { font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .ph__label { font-size: .78rem; letter-spacing: .02em; max-width: 30ch; } .ph__spec { font-size: .66rem; opacity: .72; letter-spacing: .12em; } .ph--dark { background: repeating-linear-gradient(135deg, rgba(244,239,227,.05) 0 12px, transparent 12px 24px), var(--ink-2); border-color: rgba(244,239,227,.22); color: rgba(244,239,227,.66); } /* Full-bleed backgrounds: tuck the label into a corner so it never competes with the headline sitting on top of it. */ .ph--corner { align-items: flex-end; justify-content: flex-end; text-align: right; padding: 26px 30px; gap: 3px; border: 0; } .ph--corner .ph__label { max-width: 34ch; opacity: .8; } .ph--video::before { content: "▶"; font-size: 1.5rem; letter-spacing: 0; color: var(--gold); margin-bottom: 2px; } /* ---------- 9. Footer ---------- */ .site-footer { background: var(--night); color: var(--text-invert-soft); font-size: .92rem; } .site-footer a { color: inherit; text-decoration: none; transition: color .25s var(--ease); } .site-footer a:hover { color: var(--gold-soft); } .footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 44px; padding-block: clamp(52px, 7vw, 82px); } .footer__brand .brand__name { color: var(--text-invert); } .footer__brand p { margin-top: 18px; max-width: 34ch; } .footer h4 { color: var(--text-invert); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .footer address { font-style: normal; line-height: 1.75; } .social { display: flex; gap: 12px; margin-top: 22px; } .social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; font-size: .72rem; font-weight: 600; letter-spacing: .04em; transition: all .25s var(--ease); } .social a:hover { border-color: var(--gold); background: rgba(201,162,39,.14); color: var(--gold-soft); } .footer__bottom { border-top: 1px solid var(--line-dark); padding-block: 26px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .82rem; } /* ---------- 10. Responsive ---------- */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; } } /* The nav collapses to a menu button earlier than the rest of the layout. Tamil, Kannada and Hindi labels are far longer than the English ones, and the Tamil row in particular needs the full 1200px container to fit, so the whole site switches to the menu button below that. */ @media (max-width: 1240px) { .nav-toggle { display: inline-flex; } .nav { position: fixed; inset: 0 0 auto; top: 0; z-index: 120; flex-direction: column; align-items: stretch; gap: 0; background: var(--cream); padding: 96px var(--gutter) 40px; height: 100dvh; overflow-y: auto; box-shadow: var(--shadow-lg); /* The closed panel stays inside the viewport and is hidden instead of being parked off-canvas — a translated fixed panel widens the document and lets the whole page scroll sideways on a phone. */ transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .35s var(--ease), opacity .3s var(--ease), visibility .35s; } .nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; } .nav a { padding: 17px 0; font-size: 1.18rem; font-family: var(--serif); border-bottom: 1px solid var(--line); } .nav a::after { display: none; } .nav .btn { margin-top: 26px; justify-content: center; } .nav-toggle { position: relative; z-index: 130; } body.nav-open { overflow: hidden; } } /* On wide screens the translated labels still need a tighter row than the English ones to stay inside the 1200px container. */ @media (min-width: 1241px) { html[lang="ta"] .nav, html[lang="kn"] .nav, html[lang="hi"] .nav { gap: 0; } html[lang="ta"] .nav a, html[lang="kn"] .nav a, html[lang="hi"] .nav a { padding: 10px 7px; font-size: .8rem; } html[lang="ta"] .nav .btn, html[lang="kn"] .nav .btn, html[lang="hi"] .nav .btn { padding: 11px 16px; font-size: .78rem; margin-left: 6px; } } @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; gap: 44px; } .split--media-right .split__media { order: 0; } .arch-frame { max-width: 480px; margin-inline: auto; } .arch-frame::before { inset: 12px -12px -12px 12px; } } @media (max-width: 720px) { body { font-size: 16px; } .topbar__inner { justify-content: center; text-align: center; padding-block: 8px; } .topbar__list { justify-content: center; gap: 14px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; gap: 22px; } .time-row { grid-template-columns: 1fr; gap: 8px; padding: 22px; } .time-row__when { justify-self: start; } .event { grid-template-columns: 74px 1fr; gap: 18px; } .event > .btn, .event > .link-arrow { grid-column: 2; justify-self: start; } .gallery { grid-template-columns: repeat(2, 1fr); } .gallery figure:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; } .footer__top { grid-template-columns: 1fr; gap: 36px; } .footer__bottom { justify-content: center; text-align: center; } .hero { min-height: 78vh; } } @media (max-width: 420px) { .btn { width: 100%; } .btn-row { gap: 10px; } } /* Print */ @media print { .site-header, .topbar, .nav-toggle, .hero__media, .site-footer { display: none !important; } body { background: #fff; color: #000; } }