@charset "utf-8"; /* CSS Document */ @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css"); @import url("https://use.typekit.net/xdh6nzt.css"); /* FONTS */ @font-face { font-family: "IMPRISHA"; src: url("../webfonts/IMPRISHA/IMPRISHA.woff2") format("truetype"); } :root { /* Brand colors */ --brand-gold: #d7b47d; --brand-blue: #002851; /* off / muted variants */ --off-gold: #faefe0; --off-blue: #0a1a30; /* Font stacks */ --font-heading: "IMPRISHA", "myriad-pro", "Helvetica Neue", Arial, sans-serif; --font-body: "myriad-pro", "Helvetica Neue", Arial, sans-serif; /* Will be set by JS to match actual navbar height */ --nav-height: 72px; /* Link color default (overridden by body theme) */ --link-color: var(--brand-blue); } /* ========================================================= PAGE THEME (set per page on ) (Your JS uses this to decide which theme starts first) :contentReference[oaicite:6]{index=6} ========================================================= */ body[data-theme="light"] { --link-color: var(--brand-blue); background: var(--brand-gold); color: var(--brand-blue); } body[data-theme="dark"] { --link-color: var(--brand-gold); background: var(--brand-blue); color: var(--brand-gold); } a { color: var(--link-color); } /* Always offset content for fixed-top navbar */ body { padding-top: var(--nav-height); font-family: var(--font-body); font-weight: 400; font-style: normal; } /* Typography */ h1, h2, h3, h4, .heading, .section-title { font-family: var(--font-heading); font-variant: small-caps; letter-spacing: 0.04em; font-weight: 500; text-align: center; } h5, h6 { font-family: var(--font-body); font-variant: small-caps; letter-spacing: 0.04em; font-weight: 600; font-size: var(--fs-subtitle) !important; line-height: var(--lh-subtitle); } /* ========================================================= TYPOGRAPHY SYSTEM (overrides Bootstrap display/lead sizing) Goals: a) h1 and h2 same visual size b) h3 is the section sub-headline (incl. hero) c) body text + ul share same size/weight, readable on desktop & handheld ========================================================= */ :root { --fs-title: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); --fs-subtitle: clamp(1.15rem, 1.02rem + 0.55vw, 1.45rem); --fs-body: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem); --lh-title: 1.08; --lh-subtitle: 1.25; --lh-body: 1.65; --measure: 72ch; /* comfortable line length */ } /* Titles: h1 and h2 look identical in size */ .swap-section h1, .swap-section h2 { font-size: var(--fs-title) !important; /* beats .display-4 */ line-height: var(--lh-title); margin-bottom: 1rem; } /* Section sub-headline (hero + regular sections) */ .swap-section h3, .swap-section .section-subtitle { font-family: var(--font-heading); font-variant: small-caps; letter-spacing: 0.03em; font-weight: 500; text-align: center; font-size: var(--fs-subtitle) !important; line-height: var(--lh-subtitle); margin-bottom: 1.75rem; } /* Body copy + lists: same size & weight, consistently readable */ .swap-section p, .swap-section li, .swap-section ul { font-family: var(--font-body); font-size: var(--fs-body) !important; /* beats .lead */ font-weight: 400 !important; line-height: var(--lh-body); } /* Keep paragraphs readable (avoid ultra-wide lines on desktop) */ .swap-section .container > p, .swap-section .container > ul { max-width: var(--measure); margin-left: auto; margin-right: auto; text-align: left; } /* Lists: consistent indent + spacing */ .swap-section ul { padding-left: 1.2rem; margin-bottom: 1.75rem; } .swap-section li { margin-bottom: 0.45rem; } /* If some sections use .text-center, keep headings centered but body readable */ .swap-section.text-center .container > p, .swap-section.text-center .container > ul { text-align: left; } /* Optional: slightly tighter on very small screens */ @media (max-width: 575px) { .swap-section .container > p, .swap-section .container > ul { max-width: 68ch; } } .section-content { position: relative; overflow: hidden; /* keeps overlay tidy if backgrounds animate */ } /* ========================================================= SECTIONS (JS assigns .theme-gold/.theme-blue to .swap-section) ========================================================= */ .swap-section { min-height: calc(100vh - var(--nav-height)); min-height: calc(100svh - var(--nav-height)); display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; padding-top: clamp(4rem, 10vh, 7rem); padding-bottom: clamp(3rem, 8vh, 6rem); } .swap-section > .container { flex: 1; display: flex; flex-direction: column; justify-content: center; } /* Theme base for sections */ .theme-gold { background: linear-gradient(to right, #d7b47d, #faefe0, #d7b47d); color: var(--brand-blue); /* “inverse” palette tokens (useful for components like buttons) */ --alt-bg: var(--brand-blue); --alt-fg: var(--brand-gold); --alt-border: var(--brand-blue); --alt-hover-bg: var(--off-blue); --alt-hover-fg: var(--brand-gold); --alt-hover-border: var(--brand-gold); --alt-active-bg: var(--brand-gold); --alt-active-fg: var(--brand-blue); --alt-active-border: var(--brand-blue); } .theme-blue { background: linear-gradient(to right, #0a1a30, #002851, #0a1a30); color: var(--brand-gold); --alt-bg: var(--brand-gold); --alt-fg: var(--brand-blue); --alt-border: var(--brand-gold); --alt-hover-bg: var(--off-gold); --alt-hover-fg: var(--brand-blue); --alt-hover-border: var(--brand-blue); --alt-active-bg: var(--brand-blue); --alt-active-fg: var(--brand-gold); --alt-active-border: var(--brand-gold); } .theme-gold a { color: var(--brand-blue); } .theme-blue a { color: var(--brand-gold); } .section-content { position: relative; } .section-content::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .section-content.theme-gold::before { background: linear-gradient( to bottom, rgba(215, 180, 125, 0.3), rgba(215, 180, 125, 0.3) ); } .section-content.theme-blue::before { background: linear-gradient( to bottom, rgba(0, 32, 81, 0.3), rgba(0, 32, 81, 0.3) ); } .section-content > .container { position: relative; z-index: 1; } /* ========================================================= NAV THEMES (applied by JS to #mainNavbar) ========================================================= */ .nav-gold { background: linear-gradient(to right, #d7b47d, #faefe0, #d7b47d); } .nav-blue { background: linear-gradient(to right, #0a1a30, #002851, #0a1a30); } .nav-gold .navbar-brand, .nav-gold .nav-link, .nav-gold .dropdown-toggle { color: var(--brand-blue) !important; } .nav-blue .navbar-brand, .nav-blue .nav-link, .nav-blue .dropdown-toggle { color: var(--brand-gold) !important; } .navbar-brand { display: flex; align-items: center; padding-left: 0; font-size: 1.5rem; font-weight: bold; } .navbar-icon-logo { display: inline-block; height: 45px; width: 45px; background-image: url("../images/logos/brandlogo-neu.webp"); background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: 10px; } .navbar-text-logo { height: 100%; max-height: 40px; width: auto; vertical-align: middle; font-family: "Imprint Shadow", serif; } /* If your toggler uses Bootstrap Icons (bi-list) */ .nav-gold .navbar-toggler i { color: var(--brand-blue) !important; } .nav-blue .navbar-toggler i { color: var(--brand-gold) !important; } /* ========================================================= FOOTER THEMES (assigned by JS) ========================================================= */ .site-footer { transition: background-color 0.25s ease, color 0.25s ease; border-top: 1px solid rgba(0, 0, 0, 0.08); } .footer-gold { background: linear-gradient(to right, #d7b47d, #faefe0, #d7b47d); color: var(--brand-blue); } .footer-blue { background: linear-gradient(to right, #0a1a30, #002851, #0a1a30); color: var(--brand-gold); } .footer-gold a { color: var(--brand-blue); } .footer-blue a { color: var(--brand-gold); } /* ========================================================= PARALLAX HEADER ========================================================= */ .hero-parallax { position: relative; overflow: hidden; } .hero-parallax .hero-bg { position: absolute; inset: 0; background-image: var(--hero-bg, url("../images/backgrounds/hero.webp")); background-repeat: no-repeat; background-size: cover; background-position: var(--hero-pos, center bottom); transform-origin: var(--hero-pos, center bottom); transform: translate3d(0, 0, 0) scale(1.12); will-change: transform; opacity: 0.5; z-index: 0; } .hero-parallax .hero-content { position: relative; z-index: 1; } .hero-parallax::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.12); z-index: 0; pointer-events: none; } .hero-parallax.theme-gold, .hero-parallax.theme-blue { background: transparent !important; } @media (prefers-reduced-motion: reduce) { .hero-parallax .hero-bg { transform: translate3d(0, 0, 0) scale(1.12) !important; } } /* ========================================================= NEXT SECTION BUTTONS Rule: - On gold background -> blue button with gold text - On blue background -> gold button with blue text ========================================================= */ /* Base button styling (no theme colors here) */ .btn-pill-next { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.6rem 1.1rem; border-radius: 999px; background-color: var(--next-bg); color: var(--next-fg) !important; border: 2px solid var(--next-border); font-weight: 700; letter-spacing: 0.2px; text-decoration: none; transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; cursor: pointer; } /* Theme mapping: use the section’s “inverse” palette */ .theme-gold .btn-pill-next, .theme-blue .btn-pill-next { --next-bg: var(--alt-bg); --next-fg: var(--alt-fg); --next-border: var(--alt-border); --next-hover-bg: var(--alt-hover-bg); --next-hover-fg: var(--alt-hover-fg); --next-hover-border: var(--alt-hover-border); --next-active-bg: var(--alt-active-bg); --next-active-fg: var(--alt-active-fg); --next-active-border: var(--alt-active-border); } /* Fallback ONLY when outside themed sections (prevents overriding section vars) */ .swap-section:not(.theme-gold):not(.theme-blue) .btn-pill-next { --next-bg: transparent; --next-fg: currentColor; --next-border: currentColor; --next-hover-bg: var(--off-gold); --next-hover-fg: var(--brand-blue); --next-hover-border: var(--brand-blue); --next-active-bg: var(--off-blue); --next-active-fg: var(--brand-gold); --next-active-border: var(--brand-gold); } .next-section-btn.btn-pill-next { align-self: center; margin: 1.75rem auto 1.25rem; } .btn-pill-next:hover { background-color: var(--next-hover-bg); color: var(--next-hover-fg); border-color: var(--next-hover-border); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); } .btn-pill-next:active { background-color: var(--next-active-bg); color: var(--next-active-fg); border-color: var(--next-active-border); transform: translateY(0); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16); } .btn-pill-next:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; } .section-actions { margin: 1.75rem auto 1.25rem; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .btn-pill-next__icon { display: inline-block; animation: nextArrowBob 1.15s ease-in-out infinite; } @keyframes nextArrowBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @media (prefers-reduced-motion: reduce) { .btn-pill-next__icon { animation: none; } } @media (max-height: 650px) { .next-section-btn.btn-pill-next { margin-bottom: 0.75rem; } .section-actions { margin-bottom: 0.75rem; } } /* ========================================================= PRIMARY BUTTON (Bootstrap .btn-primary) ========================================================= */ a.btn.btn-primary, button.btn.btn-primary, a.btn-primary, button.btn-primary { background-color: var(--brand-blue); color: var(--brand-gold); border: 2px solid var(--brand-blue); border-radius: 999px; padding: 0.6rem 1.15rem; font-weight: 700; letter-spacing: 0.2px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } /* Primary button hover (global) */ a.btn.btn-primary:hover, button.btn.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover { background-color: var(--off-blue); color: var(--brand-gold); border-color: var(--brand-gold); } a.btn.btn-primary:active, button.btn.btn-primary:active, a.btn-primary:active, button.btn-primary:active { background-color: var(--off-blue); color: var(--brand-gold); border-color: var(--brand-gold); transform: translateY(0); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16); } a.btn.btn-primary:focus, button.btn.btn-primary:focus, a.btn-primary:focus, button.btn-primary:focus { outline: 0; box-shadow: 0 0 0 0.25rem rgba(10, 26, 48, 0.25); } /* Semi-transparent helpers */ .bg-dark-semi-transparent { background-color: rgba(10, 26, 48, 0.5); } .bg-light-semi-transparent { background-color: rgba(250, 239, 224, 0.5); } /* Hide the entire honeypot container */ .hp-field { position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } .transition-colors { transition: color 1s ease, background-color 1s ease, border-color 1s ease; } /* ========================================================= FLOATING SECTION NAV ========================================================= */ .floating-nav { position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 1050; display: flex; flex-direction: column; gap: 0.6rem; } /* ========================================================= FLOATING NAV — DOCKED TAB STYLE (42px base, expands left) ========================================================= */ .floating-nav { position: fixed; right: 0; bottom: 22%; top: auto; transform: none; z-index: 1050; /* IMPORTANT: fixed rail width = max expanded width, prevents sibling "pop" and keeps edge docking perfect */ width: 60px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; /* theme bridge defaults */ --alt-bg: var(--brand-gold); --alt-fg: var(--brand-blue); --alt-border: transparent; --alt-hover-bg: var(--off-gold); --alt-hover-fg: var(--brand-blue); --alt-hover-border: transparent; /* theme easing (matches navbar) */ transition: background-color 1s ease, color 1s ease, border-color 1s ease; } /* Individual dock tabs */ .float-btn { width: 42px; /* base size */ height: 42px; align-self: flex-end; display: grid; place-items: center; background-color: var(--alt-bg); color: var(--alt-fg); border: 0; border-radius: 999px 0 0 999px; cursor: pointer; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22); /* the magic: animate width, but rail stays fixed */ transition: width 0.18s ease, opacity 0.18s ease, background-color 1s ease, color 1s ease, box-shadow 0.15s ease; } /* Expand left on hover, still touching viewport edge */ .float-btn:hover { width: 60px; /* matches .floating-nav width */ background-color: var(--alt-hover-bg); color: var(--alt-hover-fg); } .float-btn:active { width: 56px; } /* Make SVGs behave nicely (no weird inline spacing) */ .float-btn svg { display: block; } /* Hidden instead of disabled */ .float-btn.is-disabled { opacity: 0; pointer-events: none; } /* Mobile tweak: move it to bottom-right */ @media (max-width: 575px) { .floating-nav { top: auto; bottom: 1.25rem; transform: none; } } /* ========================================================= PHILOSOPHY CAROUSEL — DESKTOP FIT ========================================================= */ /* Default: let it be natural (mobile & tablet) */ #philosophyCarousel { max-width: 100%; } /* Desktop tuning */ @media (min-width: 992px) { #philosophyCarousel { max-width: 720px; /* controls overall footprint */ margin-left: auto; margin-right: auto; } #philosophyCarousel .carousel-inner { max-height: 420px; /* key value: keeps section in viewport */ } #philosophyCarousel .carousel-item img { max-height: 420px; object-fit: cover; /* keeps composition clean */ } } /* Card Image Styling */ .journal-card-img { width: 100%; height: 300px; object-fit: cover; /* Crop images to cover the area */ object-position: center; } .grounding-card-img { width: 100%; object-fit: cover; /* Crop images to cover the area */ object-position: center; }.portrait-card-img { width: 100%; height: auto; /* Let the height be determined by aspect ratio */ } #form-feedback { padding: 14px 16px; border-radius: 8px; margin: 16px 0; font-weight: 600; } #form-feedback.success { background: #e9f7ef; border: 1px solid #b7e3c7; } #form-feedback.error { background: #fdecea; border: 1px solid #f5b5ae; } /* Institutional Portfolio Cards */ #institutional-portfolio .card { height: 100%; display: flex; flex-direction: column; background-color: var(--off-gold); /* warm, soft */ border: 1px solid rgba(0, 40, 81, 0.15); color: var(--brand-blue); } #institutional-portfolio .card-body { flex-grow: 1; /* Makes bodies equal height */ display: flex; flex-direction: column; } #institutional-portfolio .card-footer { margin-top: auto; /* Push footer to bottom */ } .inquiry-back-btn { font-family: "myriad-pro", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.5px; position: absolute; top: 20px; left: 20px; padding: 6px 14px; font-size: 14px; text-decoration: none; color: #d7b47d; background: rgba(0, 40, 81, 0.75); border-radius: 999px; border: 1px solid rgba(215, 180, 125, 0.3); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.25s ease; z-index: 10; } .inquiry-back-btn:hover { background: rgba(0, 40, 81, 0.9); border-color: rgba(215, 180, 125, 0.6); transform: translateX(-2px); } .inquiry-back-btn, .inquiry-back-btn:visited { color: #d7b47d; } .inquiry-back-btn:hover, .inquiry-back-btn:focus { color: #d7b47d; } #how-we-work .institutional-card { display: flex; flex-direction: column; height: 100%; } #how-we-work .institutional-card .card-body { flex-grow: 1; } .showcase-card { background-color: var(--off-gold); /* warm, soft */ border: 1px solid rgba(0, 40, 81, 0.15); color: var(--brand-blue); }