/* * Health India Foundation — Home Page Redesign * Enqueued via functions.php AFTER the active theme's stylesheet. * All rules use the .hif- prefix to avoid conflicts with theme CSS. * * File: /wp-content/themes/YOUR-THEME/assets/css/home-redesign.css */ /* ── Design Tokens ──────────────────────────────────────── */ :root { --hif-forest: #1a3a2a; --hif-forest-mid: #2d5a40; --hif-gold: #c8922a; --hif-gold-light: #e8b84b; --hif-cream: #f7f2ea; --hif-cream-dark: #ede5d4; --hif-text: #1e2a20; --hif-text-muted: #5a6b5c; --hif-white: #ffffff; --hif-serif: 'Cormorant Garamond', Georgia, serif; --hif-sans: 'Jost', system-ui, sans-serif; } /* ── Google Font import (append to via wp_enqueue_style) ── */ /* see functions.php — loaded there so it doesn't duplicate */ /* ── Reset helpers scoped to HIF sections ──────────────── */ .hif-hero *, .hif-quick-grid *, .hif-welcome *, .hif-about *, .hif-values *, .hif-siddha-quote *, .hif-services *, .hif-research *, .hif-doctor *, .hif-news * { box-sizing: border-box; } /* ── Shared typography helpers ──────────────────────────── */ .hif-section-label { font-family: var(--hif-sans); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--hif-gold); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .hif-section-label::before { content: ''; display: block; width: 28px; height: 1px; background: var(--hif-gold); } .hif-section-title { font-family: var(--hif-serif); font-size: clamp(1.9rem, 2.8vw, 2.7rem); font-weight: 400; color: var(--hif-forest); line-height: 1.2; margin-bottom: 14px; } .hif-section-divider { width: 48px; height: 2px; background: var(--hif-gold); margin-bottom: 28px; } /* ── Buttons ────────────────────────────────────────────── */ .hif-btn { display: inline-block; font-family: var(--hif-sans); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 13px 30px; border-radius: 2px; text-decoration: none; transition: all .25s; cursor: pointer; border: none; } .hif-btn--primary { background: var(--hif-gold); color: var(--hif-forest); } .hif-btn--primary:hover { background: var(--hif-gold-light); color: var(--hif-forest); transform: translateY(-2px); } .hif-btn--outline { border: 1px solid rgba(255,255,255,.35); color: var(--hif-white); } .hif-btn--outline:hover { border-color: var(--hif-gold-light); color: var(--hif-gold-light); } /* ── Scroll Reveal ──────────────────────────────────────── */ .hif-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .hif-reveal.hif-visible { opacity: 1; transform: none; } /* ═══════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════ */ .hif-hero { min-height: 100vh; background: var(--hif-forest); display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; overflow: hidden; } .hif-hero__pattern { position: absolute; inset: 0; pointer-events: none; opacity: .035; background-image: repeating-linear-gradient( 45deg, var(--hif-gold) 0px, var(--hif-gold) 1px, transparent 1px, transparent 30px ); } .hif-hero__content { padding: 120px 60px 80px 80px; position: relative; z-index: 2; animation: hifFadeUp .9s ease both; } .hif-hero__eyebrow { font-family: var(--hif-sans); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--hif-gold); margin-bottom: 22px; display: flex; align-items: center; gap: 10px; } .hif-hero__eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--hif-gold); } .hif-hero__title { font-family: var(--hif-serif); font-size: clamp(2.4rem, 4.2vw, 4rem); font-weight: 300; line-height: 1.15; color: var(--hif-white); margin: 0 0 24px; } .hif-hero__title em { font-style: italic; color: var(--hif-gold-light); } .hif-hero__subtitle { font-family: var(--hif-sans); color: rgba(255,255,255,.65); font-size: 1rem; line-height: 1.8; max-width: 460px; margin: 0 0 40px; } .hif-hero__btns { display: flex; gap: 16px; flex-wrap: wrap; } .hif-hero__image-col { position: relative; height: 100vh; animation: hifFadeIn 1.2s ease both .3s; } .hif-hero__image-col img { width: 100%; height: 100%; object-fit: cover; opacity: .65; display: block; } .hif-hero__image-col::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--hif-forest) 0%, transparent 35%), linear-gradient(to top, var(--hif-forest) 0%, transparent 30%); } .hif-hero__stats { position: absolute; bottom: 60px; left: 0; z-index: 3; display: flex; gap: 48px; animation: hifFadeUp .9s ease both .5s; } .hif-stat__num { font-family: var(--hif-serif); font-size: 2.4rem; font-weight: 600; color: var(--hif-gold-light); line-height: 1; } .hif-stat__label { font-family: var(--hif-sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 4px; } /* ═══════════════════════════════════════════════════════════ QUICK INFO STRIP ═══════════════════════════════════════════════════════════ */ .hif-quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--hif-forest); } .hif-quick-card { padding: 50px 44px; border-right: 1px solid rgba(255,255,255,.08); transition: background .3s; } .hif-quick-card:last-child { border-right: none; } .hif-quick-card:hover { background: rgba(255,255,255,.04); } .hif-quick-icon { width: 44px; height: 44px; margin-bottom: 20px; color: var(--hif-gold); display: block; } .hif-quick-card h3 { font-family: var(--hif-serif); font-size: 1.4rem; font-weight: 600; color: var(--hif-white); margin: 0 0 10px; } .hif-quick-card p { font-family: var(--hif-sans); color: rgba(255,255,255,.55); font-size: .88rem; line-height: 1.75; margin: 0; } .hif-quick-card a { display: inline-block; margin-top: 18px; font-family: var(--hif-sans); color: var(--hif-gold); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(200,146,42,.35); padding-bottom: 2px; transition: border-color .25s; } .hif-quick-card a:hover { border-color: var(--hif-gold); } /* ═══════════════════════════════════════════════════════════ WELCOME STRIP ═══════════════════════════════════════════════════════════ */ .hif-welcome { background: var(--hif-white); padding: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .hif-welcome__sub { font-family: var(--hif-sans); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hif-gold); margin: 0 0 14px; } .hif-welcome__title { font-family: var(--hif-serif); font-size: clamp(1.9rem, 2.8vw, 2.7rem); font-weight: 400; color: var(--hif-forest); line-height: 1.2; margin: 0; } .hif-welcome__title span { color: var(--hif-gold); font-style: italic; } .hif-welcome__right p { font-family: var(--hif-sans); color: var(--hif-text-muted); line-height: 1.9; font-size: .96rem; margin: 0 0 28px; } /* ═══════════════════════════════════════════════════════════ ABOUT ═══════════════════════════════════════════════════════════ */ .hif-about { background: var(--hif-cream); padding: 90px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .hif-about__img-wrap { position: relative; } .hif-about__img-wrap img { width: 100%; border-radius: 2px; display: block; box-shadow: 16px 16px 0 var(--hif-cream-dark); } .hif-about__badge { position: absolute; bottom: -20px; right: -20px; background: var(--hif-gold); color: var(--hif-forest); padding: 22px 26px; border-radius: 2px; font-family: var(--hif-serif); font-size: 2.2rem; font-weight: 600; line-height: 1; text-align: center; } .hif-about__badge small { display: block; font-size: .7rem; font-family: var(--hif-sans); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; } .hif-about__content p { font-family: var(--hif-sans); color: var(--hif-text-muted); line-height: 1.9; font-size: .96rem; margin-bottom: 16px; } .hif-about__content strong { color: var(--hif-forest); } /* ═══════════════════════════════════════════════════════════ VALUES ═══════════════════════════════════════════════════════════ */ .hif-values { background: var(--hif-white); padding: 90px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .hif-values__intro { font-family: var(--hif-sans); color: var(--hif-text-muted); line-height: 1.9; font-size: .96rem; margin: 0; } .hif-value-block { margin-bottom: 44px; } .hif-value-block:last-child { margin-bottom: 0; } .hif-value-block__num { font-family: var(--hif-serif); font-size: 3.5rem; font-weight: 300; color: var(--hif-cream-dark); line-height: 1; margin-bottom: -10px; display: block; } .hif-value-block h3 { font-family: var(--hif-serif); font-size: 1.5rem; font-weight: 600; color: var(--hif-forest); margin: 0 0 10px; } .hif-value-block p { font-family: var(--hif-sans); color: var(--hif-text-muted); line-height: 1.8; font-size: .94rem; margin: 0; } /* ═══════════════════════════════════════════════════════════ SIDDHA QUOTE ═══════════════════════════════════════════════════════════ */ .hif-siddha-quote { background: var(--hif-forest-mid); padding: 70px 80px; text-align: center; } .hif-siddha-quote h2 { font-family: var(--hif-serif); font-size: 1.6rem; color: var(--hif-gold-light); font-style: italic; margin: 0 0 20px; } .hif-siddha-quote blockquote { max-width: 720px; margin: 0 auto 18px; font-family: var(--hif-sans); font-size: 1.05rem; line-height: 1.9; color: rgba(255,255,255,.75); border: none; padding: 0; background: none; } .hif-siddha-quote cite { font-family: var(--hif-sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hif-gold); font-style: normal; } /* ═══════════════════════════════════════════════════════════ SERVICES ═══════════════════════════════════════════════════════════ */ .hif-services { background: var(--hif-cream); padding: 90px 80px; } .hif-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; } .hif-service-card { background: var(--hif-white); padding: 40px 30px; position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; } .hif-service-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--hif-gold); transform: scaleX(0); transform-origin: left; transition: transform .3s; } .hif-service-card:hover::before { transform: scaleX(1); } .hif-service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(26,58,42,.1); } .hif-service-card__icon { width: 48px; height: 48px; margin-bottom: 22px; background: var(--hif-cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--hif-forest-mid); } .hif-service-card__sub { font-family: var(--hif-sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hif-gold); font-weight: 600; margin: 0 0 10px; } .hif-service-card h4 { font-family: var(--hif-serif); font-size: 1.25rem; font-weight: 600; color: var(--hif-forest); margin: 0 0 10px; } .hif-service-card > p { font-family: var(--hif-sans); color: var(--hif-text-muted); font-size: .88rem; line-height: 1.75; margin: 0; } /* ═══════════════════════════════════════════════════════════ RESEARCH ═══════════════════════════════════════════════════════════ */ .hif-research { background: var(--hif-white); padding: 90px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .hif-research__intro { font-family: var(--hif-sans); color: var(--hif-text-muted); line-height: 1.9; font-size: .96rem; margin: 0 0 8px; } .hif-research-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; } .hif-research-stat { background: var(--hif-cream); padding: 28px 24px; border-left: 3px solid var(--hif-gold); } .hif-research-stat__num { font-family: var(--hif-serif); font-size: 2.4rem; font-weight: 600; color: var(--hif-forest); line-height: 1; } .hif-research-stat__label { font-family: var(--hif-sans); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hif-text-muted); margin-top: 4px; font-weight: 600; } .hif-rp-item { padding: 20px 0; border-bottom: 1px solid var(--hif-cream-dark); display: flex; gap: 20px; align-items: flex-start; } .hif-rp-item:first-child { border-top: 1px solid var(--hif-cream-dark); } .hif-rp-item__num { font-family: var(--hif-serif); font-size: 1.8rem; font-weight: 300; color: var(--hif-gold); min-width: 36px; } .hif-rp-item h4 { font-family: var(--hif-serif); font-size: 1.1rem; font-weight: 600; color: var(--hif-forest); margin: 0 0 4px; } .hif-rp-item p { font-family: var(--hif-sans); font-size: .86rem; color: var(--hif-text-muted); line-height: 1.7; margin: 0; } .hif-rp-item a { color: var(--hif-gold); } /* ═══════════════════════════════════════════════════════════ DOCTOR PROFILE ═══════════════════════════════════════════════════════════ */ .hif-doctor { background: var(--hif-forest); padding: 90px 80px; display: grid; grid-template-columns: 360px 1fr; gap: 80px; align-items: start; } .hif-doctor__img-wrap { position: relative; } .hif-doctor__img-wrap img { width: 100%; border-radius: 2px; display: block; filter: grayscale(15%); } .hif-doctor__img-wrap::before { content: ''; position: absolute; top: -16px; left: -16px; right: 16px; bottom: 16px; border: 1px solid rgba(200,146,42,.4); border-radius: 2px; pointer-events: none; } .hif-doctor__content .hif-section-label { color: var(--hif-gold-light); } .hif-doctor__content .hif-section-label::before { background: var(--hif-gold-light); } .hif-doctor__content h2 { font-family: var(--hif-serif); font-size: clamp(1.9rem, 2.8vw, 2.7rem); font-weight: 400; color: var(--hif-white); margin: 0 0 8px; line-height: 1.2; } .hif-doctor__cred { font-family: var(--hif-sans); font-size: .82rem; color: var(--hif-gold); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin: 0 0 28px; display: block; } .hif-doctor__bio p { font-family: var(--hif-sans); color: rgba(255,255,255,.65); line-height: 1.9; font-size: .95rem; margin-bottom: 16px; } .hif-roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; } .hif-role-item { background: rgba(255,255,255,.05); padding: 18px 20px; border-left: 2px solid var(--hif-gold); } .hif-role-item h5 { font-family: var(--hif-sans); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hif-gold); margin: 0 0 4px; } .hif-role-item p { font-family: var(--hif-sans); font-size: .86rem; color: rgba(255,255,255,.6); line-height: 1.5; margin: 0; } /* ═══════════════════════════════════════════════════════════ NEWS ═══════════════════════════════════════════════════════════ */ .hif-news { background: var(--hif-cream); padding: 90px 80px; } .hif-news__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; } .hif-news__header .hif-section-title { margin-bottom: 0; } .hif-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .hif-news-card { background: var(--hif-white); overflow: hidden; transition: transform .3s, box-shadow .3s; } .hif-news-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(26,58,42,.12); } .hif-news-card__thumb { display: block; overflow: hidden; height: 200px; } .hif-news-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .hif-news-card__thumb--placeholder { height: 200px; background: linear-gradient(135deg, var(--hif-forest) 0%, var(--hif-forest-mid) 100%); display: flex; align-items: center; justify-content: center; } .hif-news-card__thumb--placeholder svg { opacity: .25; width: 48px; height: 48px; color: white; } .hif-news-card__body { padding: 28px 26px; } .hif-news-card__tag { font-family: var(--hif-sans); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hif-gold); margin-bottom: 10px; } .hif-news-card h4 { font-family: var(--hif-serif); font-size: 1.2rem; font-weight: 600; color: var(--hif-forest); line-height: 1.35; margin: 0 0 10px; } .hif-news-card h4 a { color: inherit; text-decoration: none; transition: color .25s; } .hif-news-card h4 a:hover { color: var(--hif-gold); } .hif-news-card p { font-family: var(--hif-sans); font-size: .86rem; color: var(--hif-text-muted); line-height: 1.7; margin: 0; } .hif-news-card__read { display: inline-block; margin-top: 16px; font-family: var(--hif-sans); color: var(--hif-forest-mid); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--hif-gold); padding-bottom: 2px; transition: color .25s; } .hif-news-card__read:hover { color: var(--hif-gold); } /* ═══════════════════════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════════════════════ */ @keyframes hifFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes hifFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ═══════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .hif-hero { grid-template-columns: 1fr; min-height: auto; } .hif-hero__image-col { display: none; } .hif-hero__content { padding: 140px 40px 80px; } .hif-hero__stats { position: static; margin-top: 50px; } .hif-quick-grid { grid-template-columns: 1fr; } .hif-quick-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); } .hif-services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .hif-welcome, .hif-about, .hif-values, .hif-research, .hif-doctor { grid-template-columns: 1fr; padding: 60px 28px; gap: 48px; } .hif-services { padding: 60px 28px; } .hif-services-grid { grid-template-columns: 1fr; } .hif-news { padding: 60px 28px; } .hif-news-grid { grid-template-columns: 1fr; } .hif-news__header { flex-direction: column; align-items: flex-start; gap: 20px; } .hif-siddha-quote { padding: 60px 28px; } .hif-about__badge { right: 0; } .hif-roles-grid { grid-template-columns: 1fr; } .hif-research-stats { grid-template-columns: 1fr 1fr; } .hif-doctor { grid-template-columns: 1fr; } }