@charset "utf-8"; /* CSS Document */ @import url("../webfonts/IMPRISHA/stylesheet.css"); @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css"); @import url("https://use.typekit.net/xdh6nzt.css"); :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(2.0rem, 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: .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,.3), rgba(215,180,125,.3)); } .section-content.theme-blue::before{ background: linear-gradient(to bottom, rgba(0,32,81,.3), rgba(0,32,81,.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.png"); 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 .25s ease, color .25s ease; border-top: 1px solid rgba(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.jpg")); background-size: cover; background-position: center bottom; transform-origin: center bottom; transform: translate3d(0,0,0) scale(1.12); will-change: transform; opacity: 0.50; 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,.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: .55rem; padding: .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: .2px; text-decoration: none; transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .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,.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,.16); } .btn-pill-next:focus-visible{ outline: 3px solid currentColor; outline-offset: 4px; } .section-actions{ margin: 1.75rem auto 1.25rem; display: flex; gap: .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: .75rem; } .section-actions{ margin-bottom: .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: .6rem 1.15rem; font-weight: 700; letter-spacing: .2px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .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,.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 .25rem rgba(10, 26, 48, .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 1.0s ease, background-color 1.0s ease, border-color 1.0s ease; } /* ========================================================= FLOATING SECTION NAV ========================================================= */ .floating-nav{ position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 1050; display: flex; flex-direction: column; gap: .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 1.0s ease, color 1.0s ease, border-color 1.0s 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,.22); /* the magic: animate width, but rail stays fixed */ transition: width .18s ease, opacity .18s ease, background-color 1.0s ease, color 1.0s ease, box-shadow .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: 250px; 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; }