/* ===================================================================== DHAN HOPE — Brand theme (sits on top of Bootstrap 5.3) --------------------------------------------------------------------- This is the ONLY custom stylesheet. Everything structural on the pages uses normal Bootstrap classes (container, row, col, card, navbar, btn, form-control, accordion, utilities). This file does two things: 1. Re-skins Bootstrap with the DHAN HOPE palette + fonts (the block of variables right below — change a value here, the whole site shifts). 2. Adds the few signature pieces Bootstrap doesn't have: the roofline divider, the dark hero / page header, the impact-number band, the story drop-cap and the award rows. Load order in : bootstrap.min.css → fonts.css → theme.css ===================================================================== */ /* ------------------------------------------------------------------ * * 1. BRAND TOKENS — edit these to recolour the site * ------------------------------------------------------------------ */ :root { --hope-ink: #16213e; /* deep indigo navy — dark sections */ --hope-ink-2: #1d2c4d; --hope-brand: #c2562f; /* terracotta — primary brand */ --hope-brand-deep: #9c3f1f; /* brand text on light */ --hope-signal: #e6a534; /* warm amber — single accent */ --hope-signal-deep: #b97c14; --hope-rose: #b8407d; /* logo magenta — rare highlight only */ --hope-paper: #f7f1e7; /* warm sand background */ --hope-paper-2: #efe5d4; /* subtle panel */ --hope-paper-3: #e3d6bf; --hope-ink-text: #20242e; /* body text on paper */ --hope-soft: #5c5849; /* muted text */ --hope-paper-text: #f4ede2; /* text on dark */ --hope-paper-mute: #b6b1a3; /* muted text on dark */ --hope-line: rgba(22, 33, 62, 0.15); --hope-line-dark: rgba(230, 165, 52, 0.22); --hope-shadow: 0 30px 60px -34px rgba(18, 22, 40, 0.5); /* --- map the brand into Bootstrap's own variables --- */ --bs-body-font-family: "Plus Jakarta Sans Variable", system-ui, sans-serif; --bs-body-color: var(--hope-ink-text); --bs-body-bg: var(--hope-paper); --bs-emphasis-color: var(--hope-ink-text); --bs-secondary-color: var(--hope-soft); --bs-primary: var(--hope-brand); --bs-primary-rgb: 194, 86, 47; --bs-link-color: var(--hope-brand-deep); --bs-link-color-rgb: 156, 63, 31; --bs-link-hover-color: var(--hope-brand); --bs-link-hover-color-rgb: 194, 86, 47; --bs-border-color: var(--hope-line); --bs-border-radius: 0.9rem; --bs-border-radius-lg: 1.25rem; } /* keep the comfortable 1180px measure of the original */ @media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1180px; } } body { line-height: 1.62; -webkit-font-smoothing: antialiased; } ::selection { background: var(--hope-signal); color: var(--hope-ink); } /* ------------------------------------------------------------------ * * 2. TYPOGRAPHY * ------------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: "Fraunces Variable", Georgia, serif; font-weight: 600; line-height: 1.07; letter-spacing: -0.01em; color: var(--hope-ink-text); } .lead { font-family: "Fraunces Variable", Georgia, serif; font-weight: 400; } /* eyebrow / kicker label */ .kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hope-brand-deep); } .kicker::before { content: ""; width: 24px; border-top: 2px solid currentColor; } .text-brand { color: var(--hope-brand) !important; } .text-brand-deep { color: var(--hope-brand-deep) !important; } .text-signal { color: var(--hope-signal-deep) !important; } .text-rose { color: var(--hope-rose) !important; } .fst-serif { font-family: "Fraunces Variable", Georgia, serif; } /* ------------------------------------------------------------------ * * 3. BACKGROUNDS / SECTION HELPERS * ------------------------------------------------------------------ */ .bg-hope-ink { background: var(--hope-ink) !important; color: var(--hope-paper-text); } .bg-hope-paper-2 { background: var(--hope-paper-2) !important; } .section { padding-block: clamp(64px, 9vw, 116px); } /* standard vertical rhythm */ .section-tight { padding-block: clamp(48px, 6vw, 76px); } /* text colours when on a dark section */ .bg-hope-ink h1, .bg-hope-ink h2, .bg-hope-ink h3, .bg-hope-ink h4, .bg-hope-ink h5, .bg-hope-ink .h1, .bg-hope-ink .h2, .bg-hope-ink .h3 { color: var(--hope-paper-text); } .bg-hope-ink .kicker { color: var(--hope-signal); } .bg-hope-ink .lead { color: var(--hope-paper-text); } .bg-hope-ink p { color: var(--hope-paper-mute); } /* ------------------------------------------------------------------ * * 4. BUTTONS (defined the Bootstrap way, so they stay editable) * ------------------------------------------------------------------ */ .btn { font-weight: 600; } .btn-brand { --bs-btn-color: #fff; --bs-btn-bg: var(--hope-brand); --bs-btn-border-color: var(--hope-brand); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--hope-brand-deep); --bs-btn-hover-border-color: var(--hope-brand-deep); --bs-btn-active-bg: var(--hope-brand-deep); --bs-btn-active-border-color: var(--hope-brand-deep); } .btn-signal { --bs-btn-color: var(--hope-ink); --bs-btn-bg: var(--hope-signal); --bs-btn-border-color: var(--hope-signal); --bs-btn-hover-color: var(--hope-ink); --bs-btn-hover-bg: #d9962a; --bs-btn-hover-border-color: #d9962a; } .btn-outline-ink { --bs-btn-color: var(--hope-ink-text); --bs-btn-border-color: var(--hope-ink); --bs-btn-hover-color: var(--hope-paper-text); --bs-btn-hover-bg: var(--hope-ink); --bs-btn-hover-border-color: var(--hope-ink); } .btn-outline-light-ink { /* ghost button on a dark background */ --bs-btn-color: var(--hope-paper-text); --bs-btn-border-color: rgba(244, 237, 226, 0.45); --bs-btn-hover-color: var(--hope-ink); --bs-btn-hover-bg: var(--hope-signal); --bs-btn-hover-border-color: var(--hope-signal); } .btn-arr::after { content: " \2192"; } /* ------------------------------------------------------------------ * * 5. NAVBAR * ------------------------------------------------------------------ */ .site-header { background: rgba(247, 241, 231, 0.85); backdrop-filter: blur(16px); border-bottom: 1px solid var(--hope-line); } .navbar-brand { display: flex; align-items: center; gap: 12px; } .navbar-brand img { width: 80px;; height: auto; } .brand-word { font-family: "Fraunces Variable", serif; font-weight: 700; font-size: 1.3rem; line-height: 1; color: var(--hope-ink-text); letter-spacing: 0.01em; } .brand-word .hl { color: var(--hope-rose); } .brand-sub { display: block; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hope-soft); margin-top: 4px; } .site-header .nav-link { font-weight: 600; color: var(--hope-ink-text); } .site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--hope-brand); } .site-header .nav-item.active > .nav-link { color: var(--hope-brand); } /* Increase dropdown width */ .dropdown-menu { min-width: 320px; /* Change to 350px or 400px if needed */ border: 1px solid var(--hope-line); border-radius: 1rem; box-shadow: var(--hope-shadow); padding: 0.5rem; --bs-dropdown-link-active-bg: var(--hope-ink); } /* Dropdown items */ .dropdown-item { border-radius: 0.6rem; padding: 0.8rem 1rem; white-space: normal; } .dropdown-item b { display: block; font-weight: 600; margin-bottom: 3px; } .dropdown-item small { color: var(--hope-soft); transition: .3s; } /* Hover effect */ .dropdown-item:hover { background: var(--hope-ink); color: var(--hope-paper-text); } .dropdown-item:hover b, .dropdown-item:hover small { color: var(--hope-paper-text); } /* Desktop: Open dropdown on hover */ @media (min-width: 992px) { .navbar .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; opacity: 1; visibility: visible; } .navbar .dropdown-menu { display: block; opacity: 0; visibility: hidden; transition: all .25s ease; transform: translateY(10px); } .navbar .dropdown:hover > .dropdown-menu { transform: translateY(0); } } .navbar .dropdown-menu { transition: opacity .25s ease, transform .25s ease; } .soon-tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--hope-paper-3); color: var(--hope-soft); padding: 1px 7px; border-radius: 20px; vertical-align: middle; } /* ------------------------------------------------------------------ * * 6. ROOFLINE — the signature divider / motif * ------------------------------------------------------------------ */ .roofline { display: block; width: 100%; height: 14px; color: var(--hope-signal); } .roofline svg { display: block; width: 100%; height: 100%; } /* ------------------------------------------------------------------ * * 7. HERO + INTERIOR PAGE HEADER (dark, with warm glow + roofline) * ------------------------------------------------------------------ */ .hero, .page-head { position: relative; overflow: hidden; background: var(--hope-ink); color: var(--hope-paper-text); } .hero { padding-block: clamp(70px, 10vw, 128px) clamp(70px, 8vw, 110px); } .page-head { padding-block: clamp(64px, 8vw, 104px) clamp(48px, 6vw, 72px); } .hero::after, .page-head::after { content: ""; position: absolute; right: -12%; top: -25%; width: 62%; height: 150%; z-index: 0; background: radial-gradient( circle at 60% 40%, rgba(194, 86, 47, 0.42), transparent 60% ), radial-gradient( circle at 72% 78%, rgba(230, 165, 52, 0.16), transparent 55% ); } .hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 0; opacity: 0.5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120' fill='none' stroke='%23e6a534' stroke-opacity='.20' stroke-width='2'%3E%3Cpath d='M0 120 L40 78 L80 120 M70 120 L110 70 L150 120 M150 120 L185 84 L220 120'/%3E%3C/svg%3E") repeat-x bottom; } .hero > .container, .page-head > .container { position: relative; z-index: 1; } .hero h1 { color: var(--hope-paper-text); font-size: clamp(2.7rem, 6.4vw, 5.2rem); max-width: 17ch; } .hero .lead { color: var(--hope-paper-text); max-width: 58ch; opacity: 0.94; } .hero .u { font-style: italic; color: var(--hope-signal); } .page-head h1 { color: var(--hope-paper-text); font-size: clamp(2.4rem, 5.4vw, 4rem); max-width: 18ch; } .page-head .lead { color: var(--hope-paper-text); opacity: 0.92; max-width: 60ch; } .hero-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hope-signal); border: 1px solid var(--hope-line-dark); padding: 8px 16px; border-radius: 30px; } .hero-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hope-signal); } .crumbs { color: var(--hope-signal); font-size: 0.8rem; letter-spacing: 0.04em; } .crumbs a { color: var(--hope-signal); opacity: 0.85; text-decoration: none; } .crumbs a:hover { opacity: 1; } /* ------------------------------------------------------------------ * * 8. IMPACT NUMBER BAND * ------------------------------------------------------------------ */ .impact { background: var(--hope-ink-2); color: var(--hope-paper-text); } .impact .col-impact { padding: 46px 30px; border-right: 1px solid var(--hope-line-dark); } .impact .col-impact:last-child { border-right: 0; } .impact .fig { font-family: "Fraunces Variable", serif; font-weight: 600; font-size: clamp(2.2rem, 3.6vw, 3.1rem); color: var(--hope-signal); line-height: 1; } .impact .unit { font-weight: 700; margin-top: 10px; color: var(--hope-paper-text); } .impact .note { font-size: 0.88rem; color: var(--hope-paper-mute); margin-top: 8px; } @media (max-width: 767px) { .impact .col-impact { border-right: 0; border-bottom: 1px solid var(--hope-line-dark); } } /* ------------------------------------------------------------------ * * 9. CARDS / VALUE CARDS / TILES * ------------------------------------------------------------------ */ .card { --bs-card-border-color: var(--hope-line); --bs-card-bg: var(--hope-paper); --bs-card-border-radius: var(--bs-border-radius-lg); } .card-hover { transition: transform 0.3s, box-shadow 0.3s; } .card-hover:hover { transform: translateY(-5px); box-shadow: var(--hope-shadow); } .card .num { font-family: "Fraunces Variable", serif; font-weight: 600; color: var(--hope-brand-deep); } .value-card { background: var(--hope-paper-2); border-radius: var(--bs-border-radius-lg); border-top: 4px solid var(--hope-brand); transition: transform 0.3s, border-color 0.3s; } .value-card:hover { border-top-color: var(--hope-signal); transform: translateY(-5px); } .frame { border-radius: var(--bs-border-radius-lg); overflow: hidden; border: 1px solid var(--hope-line); box-shadow: var(--hope-shadow); background: var(--hope-paper-2); } .frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .ratio-tall { aspect-ratio: 4/5; } .ratio-wide { aspect-ratio: 16/10; } .statement { font-family: "Fraunces Variable", serif; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.32; } .statement em { font-style: italic; color: var(--hope-brand-deep); } /* panel (legacy strip on dark home section) */ .panel-brand { background: var(--hope-brand); color: #fff; border-radius: var(--bs-border-radius-lg); } .panel-brand .lf { font-family: "Fraunces Variable", serif; font-weight: 600; font-size: 1.7rem; color: var(--hope-signal); min-width: 150px; } .panel-brand .row-line { border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .panel-brand .row-line:last-child { border-bottom: 0; } /* ------------------------------------------------------------------ * * 10. MODEL LEVELS (numbered, roof bullets) * ------------------------------------------------------------------ */ .level { border-top: 1px solid var(--hope-line); } .level-no { font-family: "Fraunces Variable", serif; font-weight: 600; font-size: clamp(2.4rem, 5vw, 4rem); color: var(--hope-paper-3); line-height: 0.8; } .roof-list { list-style: none; padding-left: 0; } .roof-list li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px dashed var(--hope-line); } .roof-list li:last-child { border-bottom: 0; } .roof-list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 13px; height: 9px; background: var(--hope-brand); clip-path: polygon(50% 0, 100% 100%, 0 100%); } /* ------------------------------------------------------------------ * * 11. SOLUTIONS LIST * ------------------------------------------------------------------ */ .sol-item { border-bottom: 1px solid var(--hope-line); transition: padding-left 0.2s; } .sol-item:hover { padding-left: 8px; } .sol-no { font-family: "Fraunces Variable", serif; font-weight: 600; color: var(--hope-brand-deep); min-width: 34px; } /* ------------------------------------------------------------------ * * 12. AWARDS + MILESTONES * ------------------------------------------------------------------ */ .award { border-top: 1px solid var(--hope-line); } .award-media { border-radius: var(--bs-border-radius-lg); overflow: hidden; border: 1px solid var(--hope-line); box-shadow: var(--hope-shadow); aspect-ratio: 4/3; background: var(--hope-paper-2); } .award-media img { width: 100%; height: 100%; object-fit: cover; } .award-year { font-family: "Fraunces Variable", serif; font-weight: 600; color: var(--hope-signal-deep); } .milestone { border-bottom: 1px solid var(--hope-line); } .milestone:last-child { border-bottom: 0; } .ms-mark { width: 40px; height: 40px; color: var(--hope-brand); flex: none; } /* ------------------------------------------------------------------ * * 13. COLLABORATORS * ------------------------------------------------------------------ */ .collab { border-top: 1px solid var(--hope-line); } .collab .c-tag { font-weight: 600; color: var(--hope-signal-deep); font-size: 0.85rem; } /* ------------------------------------------------------------------ * * 14. STORY (impact narrative) * ------------------------------------------------------------------ */ .story-lead { font-family: "Fraunces Variable", serif; font-style: italic; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.4; border-left: 3px solid var(--hope-signal); padding-left: 24px; } .story-body p { font-family: "Fraunces Variable", serif; font-weight: 400; font-size: 1.18rem; line-height: 1.7; margin-bottom: 24px; } .story-body p:first-of-type::first-letter { font-size: 3.4rem; font-weight: 600; float: left; line-height: 0.8; padding: 6px 12px 0 0; color: var(--hope-brand); } .gallery-cap { font-size: 0.8rem; color: var(--hope-soft); } /* ------------------------------------------------------------------ * * 15. NEWS + VIDEO * ------------------------------------------------------------------ */ .news-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hope-brand-deep); } .news-date { font-size: 0.85rem; color: var(--hope-soft); } .vt-frame { aspect-ratio: 16/9; background: var(--hope-ink); display: grid; place-items: center; } .vt-frame .play { width: 64px; height: 64px; border-radius: 50%; background: rgba(230, 165, 52, 0.16); border: 1px solid var(--hope-line-dark); display: grid; place-items: center; color: var(--hope-signal); } .vt-frame .play svg { width: 24px; height: 24px; margin-left: 3px; } /* ------------------------------------------------------------------ * * 16. KNOWLEDGE / SOON * ------------------------------------------------------------------ */ .kms-card { background: var(--hope-ink); color: var(--hope-paper-text); border-radius: var(--bs-border-radius-lg); border: 1px solid var(--hope-line-dark); } .kms-card .lock { width: 48px; height: 48px; border-radius: 12px; background: rgba(230, 165, 52, 0.16); color: var(--hope-signal); display: grid; place-items: center; } .kf-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--hope-paper-2); color: var(--hope-brand); display: grid; place-items: center; font-family: "Fraunces Variable", serif; font-weight: 700; } .soon-banner { display: inline-flex; align-items: center; gap: 10px; background: var(--hope-paper-2); border: 1px solid var(--hope-line); color: var(--hope-brand-deep); font-weight: 600; font-size: 0.82rem; padding: 8px 16px; border-radius: 30px; } .soon-banner::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hope-brand); } .dev-note { background: var(--hope-paper-2); border: 1px dashed var(--hope-line); border-radius: var(--bs-border-radius); color: var(--hope-soft); } .dev-note code { background: var(--hope-paper-3); padding: 1px 6px; border-radius: 5px; } /* ------------------------------------------------------------------ * * 17. CTA BAND * ------------------------------------------------------------------ */ .cta-band { background: var(--hope-signal); color: var(--hope-ink); } .cta-band h2 { color: var(--hope-ink); } .cta-band p { color: var(--hope-ink); opacity: 0.8; } /* ------------------------------------------------------------------ * * 18. FORM FOCUS / FLASH * ------------------------------------------------------------------ */ .form-control:focus, .form-select:focus { border-color: var(--hope-brand); box-shadow: 0 0 0 0.25rem rgba(194, 86, 47, 0.18); } .flash-ok { background: rgba(230, 165, 52, 0.18); border: 1px solid var(--hope-signal-deep); color: var(--hope-ink-text); } .flash-err { background: #fbeaea; border: 1px solid #d97070; color: #7a1f1f; } /* ------------------------------------------------------------------ * * 19. FOOTER * ------------------------------------------------------------------ */ .site-footer { background: var(--hope-ink); color: var(--hope-paper-text); } .site-footer h5 { font-family: "Plus Jakarta Sans Variable", sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hope-signal); } .site-footer a { color: var(--hope-paper-mute); text-decoration: none; } .site-footer a:hover { color: var(--hope-signal); } .site-footer .foot-logo { width: 64px; background: #fff; border-radius: 12px; padding: 8px; } .site-footer .foot-tag { font-family: "Fraunces Variable", serif; color: var(--hope-paper-text); } .site-footer .foot-parent, .site-footer .foot-contact li { color: var(--hope-paper-mute); font-size: 0.9rem; } .foot-bottom { border-top: 1px solid var(--hope-line-dark); color: var(--hope-paper-mute); font-size: 0.85rem; } .foot-bottom .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hope-signal); display: inline-block; } /* admin */ .admin-side { background: var(--hope-ink); color: var(--hope-paper-text); min-height: 100vh; } .admin-side a { color: var(--hope-paper-mute); text-decoration: none; display: block; border-radius: 8px; padding: 10px 12px; } .admin-side a:hover, .admin-side a.active { background: var(--hope-ink-2); color: var(--hope-signal); } .stub { background: var(--hope-paper-2); border: 1px dashed var(--hope-line); border-radius: var(--bs-border-radius); color: var(--hope-soft); } /* ------------------------------------------------------------------ * * 20. SCROLL REVEAL (progressive enhancement; safe if JS is off) * ------------------------------------------------------------------ */ [data-fade] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } [data-fade].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-fade] { opacity: 1; transform: none; transition: none; } } /*========================================================================================= ##### MY CSS ###### ===========================================================================================*/ .brand-word{ margin-top:20px; } .dropdown-menu li{ padding-right:25px !important; } /* #### Mobile view ### */ @media (max-width: 767.98px) { .brand-sub { display: none; } .navbar-toggler { border: none !important; } }