/* ========================================================================== EDUCATE TO ELEVATE — GLOBAL STYLESHEET Standalone static site. Linked from every page's . Covers design tokens, header/nav/footer, and every reusable component (buttons, badges, tags, form fields, toast, quote blocks, ember particles). Page-specific layout stays inline in each page's HTML, matching the original design spec. ========================================================================== */ /* ---- Webfonts --------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); /* ---- Design tokens (from tokens/*.css — copied verbatim) -------------- */ :root { /* Brand anchors (fixed — do not alter without sign-off) */ --teal-600: #027a6a; --gold-500: #eabb1e; --brown-900: #3d312a; --white: #ffffff; /* Teal ramp */ --teal-900: oklch(from var(--teal-600) calc(l * 0.55) c h); --teal-800: oklch(from var(--teal-600) calc(l * 0.72) c h); --teal-700: oklch(from var(--teal-600) calc(l * 0.88) c h); --teal-500: oklch(from var(--teal-600) calc(l * 1.14) calc(c * 0.94) h); --teal-400: oklch(from var(--teal-600) calc(l * 1.34) calc(c * 0.78) h); --teal-300: oklch(from var(--teal-600) calc(l * 1.55) calc(c * 0.55) h); --teal-100: oklch(from var(--teal-600) calc(l * 1.86) calc(c * 0.22) h); --teal-50: oklch(from var(--teal-600) calc(l * 1.98) calc(c * 0.10) h); /* Gold ramp */ --gold-700: oklch(from var(--gold-500) calc(l * 0.74) calc(c * 1.05) h); --gold-600: oklch(from var(--gold-500) calc(l * 0.88) c h); --gold-400: oklch(from var(--gold-500) calc(l * 1.08) calc(c * 0.92) h); --gold-200: oklch(from var(--gold-500) calc(l * 1.25) calc(c * 0.5) h); --gold-100: oklch(from var(--gold-500) calc(l * 1.34) calc(c * 0.28) h); --gold-50: oklch(from var(--gold-500) calc(l * 1.4) calc(c * 0.12) h); /* Brown / warm neutral ramp */ --brown-800: oklch(from var(--brown-900) calc(l * 1.12) calc(c * 0.94) h); --brown-700: oklch(from var(--brown-900) calc(l * 1.35) calc(c * 0.85) h); --brown-600: oklch(from var(--brown-900) calc(l * 1.6) calc(c * 0.7) h); --brown-500: oklch(from var(--brown-900) calc(l * 1.9) calc(c * 0.55) h); --brown-300: oklch(from var(--brown-900) calc(l * 2.5) calc(c * 0.32) h); --brown-200: oklch(from var(--brown-900) calc(l * 2.85) calc(c * 0.2) h); --brown-100: oklch(from var(--brown-900) calc(l * 3.1) calc(c * 0.12) h); --brown-50: oklch(from var(--brown-900) calc(l * 3.35) calc(c * 0.06) h); /* Semantic aliases */ --surface-page: var(--white); --surface-warm: var(--brown-50); --surface-card: var(--white); --surface-inverse: var(--brown-900); --surface-teal: var(--teal-600); --surface-teal-tint: var(--teal-50); --surface-gold-tint: var(--gold-50); --text-primary: var(--brown-900); --text-secondary: oklch(from var(--brown-900) calc(l * 1.9) calc(c * 0.55) h); --text-muted: oklch(from var(--brown-900) calc(l * 2.3) calc(c * 0.35) h); --text-inverse: var(--white); --text-on-teal: var(--white); --text-on-gold: var(--brown-900); --border-hairline: oklch(from var(--brown-900) calc(l * 3.0) calc(c * 0.2) h); --border-strong: var(--brown-900); --border-teal: var(--teal-600); --border-gold: var(--gold-500); --accent-teal: var(--teal-600); --accent-gold: var(--gold-500); --focus-ring: var(--teal-600); --state-hover-teal: var(--teal-800); --state-active-teal: var(--teal-900); --state-hover-gold: var(--gold-600); --state-active-gold: var(--gold-700); /* Typography */ --font-display: "Abril Fatface", "Times New Roman", serif; --font-body: "Work Sans", -apple-system, "Segoe UI", sans-serif; --text-display-xl-size: clamp(2.75rem, calc(2.1rem + 2.6vw), 4.75rem); --text-display-xl-line: 1.05; --text-display-lg-size: clamp(2.25rem, calc(1.85rem + 1.7vw), 3.5rem); --text-display-lg-line: 1.08; --text-display-md-size: clamp(1.75rem, calc(1.5rem + 1vw), 2.5rem); --text-display-md-line: 1.12; --text-display-sm-size: 1.5rem; --text-display-sm-line: 1.2; --text-eyebrow-size: 0.8125rem; --text-eyebrow-weight: 600; --text-eyebrow-line: 1.4; --text-body-lg-size: 1.1875rem; --text-body-lg-line: 1.6; --text-body-size: 1.0625rem; --text-body-line: 1.65; --text-body-sm-size: 0.9375rem; --text-body-sm-line: 1.5; --text-caption-size: 0.8125rem; --text-label-size: 0.875rem; --text-button-size: 0.9375rem; --tracking-eyebrow: 0.14em; --tracking-label: 0.02em; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --content-max: 1200px; --content-narrow: 720px; --gutter: clamp(1.5rem, 4vw, 4rem); /* Effects */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-round: 999px; --border-width-hairline: 1px; --shadow-card: 0 4px 16px rgba(61, 49, 42, 0.08); --shadow-lift: 0 12px 32px rgba(61, 49, 42, 0.14); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-standard: 200ms; } /* ---- Base reset --------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: clip; max-width: 100%; } body { font-family: var(--font-body); color: var(--text-primary); background: var(--white); } img { max-width: 100%; display: block; } a { text-decoration: none; } /* ========================================================================== HEADER / NAV ========================================================================== */ .e2e-header { position: relative; background: var(--white); border-bottom: 1px solid var(--border-hairline); padding: 0 var(--space-8); display: flex; align-items: center; justify-content: space-between; } .e2e-header__logo { display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; flex-shrink: 0; min-width: 0; } .e2e-header__logo img { height: 48px; width: auto; flex-shrink: 0; } .e2e-header__title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.01em; color: var(--brown-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--duration-standard) var(--ease-out); } .e2e-header__logo:hover .e2e-header__title { color: var(--teal-600); } .e2e-nav { display: flex; gap: 32px; } .e2e-nav a { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-secondary); padding: 20px 0; border-bottom: 2px solid transparent; transition: color var(--duration-standard) var(--ease-out); } .e2e-nav a.is-active { color: var(--teal-600); border-bottom-color: var(--teal-600); } .e2e-nav a:hover:not(.is-active) { color: var(--teal-600); } /* ---- Mobile nav toggle (hamburger) -------------------------------------- */ .e2e-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 0; background: none; border: none; cursor: pointer; flex-shrink: 0; position: relative; z-index: 5; } .e2e-nav-toggle span { display: block; width: 100%; height: 2px; background: var(--brown-900); transition: transform 0.25s ease, opacity 0.25s ease; } .e2e-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .e2e-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .e2e-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 720px) { .e2e-header { padding: 10px var(--space-5); flex-wrap: nowrap; } .e2e-header__logo img { height: 38px; } .e2e-header__title { font-size: 1rem; } .e2e-nav-toggle { display: flex; } .e2e-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); box-shadow: var(--shadow-card); padding: 4px var(--space-5) 12px; z-index: 30; } .e2e-nav.is-open { display: flex; } .e2e-nav a { padding: 14px 0; border-bottom: 1px solid var(--border-hairline); } .e2e-nav a:last-child { border-bottom: none; } } /* Very narrow phones: drop the wordmark text so the logo + hamburger never crowd or wrap — icon mark alone is still a recognizable, tappable home link. */ @media (max-width: 380px) { .e2e-header__title { display: none; } } /* ========================================================================== BUTTONS ========================================================================== */ .e2e-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: var(--text-button-size); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; padding: 14px 28px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background var(--duration-standard) var(--ease-out), color var(--duration-standard) var(--ease-out), border-color var(--duration-standard) var(--ease-out); } .e2e-btn--primary { background: var(--teal-600); color: var(--text-on-teal); } .e2e-btn--primary:hover { background: var(--state-hover-teal); } .e2e-btn--gold { background: var(--gold-500); color: var(--text-on-gold); } .e2e-btn--gold:hover { background: var(--state-hover-gold); } .e2e-btn--outline { background: transparent; color: var(--brown-900); border-color: var(--brown-900); } .e2e-btn--outline:hover { background: var(--brown-900); color: var(--white); } .e2e-btn--underline { background: transparent; color: var(--brown-900); padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--brown-900); text-transform: none; letter-spacing: normal; font-weight: 600; } .e2e-btn--underline:hover { color: var(--teal-600); border-bottom-color: var(--teal-600); } /* ========================================================================== BADGES (About credential chips) ========================================================================== */ .e2e-badge { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; } .e2e-badge--gold { background: var(--gold-500); color: var(--text-on-gold); } .e2e-badge--teal { background: var(--teal-600); color: var(--text-on-teal); } .e2e-badge--outline { background: transparent; color: var(--brown-900); border-color: var(--border-hairline); } /* ========================================================================== TAGS (Keynotes year filter — visual only, no JS filtering in v1) ========================================================================== */ .e2e-tag { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: var(--radius-round); border: 1px solid var(--border-hairline); color: var(--text-secondary); background: var(--white); } .e2e-tag.is-active { background: var(--teal-600); color: var(--white); border-color: var(--teal-600); } /* ========================================================================== FORM FIELDS (flat underline style — Contact page) ========================================================================== */ .e2e-field { display: flex; flex-direction: column; gap: 6px; } .e2e-field label { font-size: var(--text-label-size); font-weight: 600; color: var(--text-secondary); } .e2e-field input, .e2e-field select, .e2e-field textarea { font-family: var(--font-body); font-size: 16px; color: var(--text-primary); background: transparent; border: none; border-bottom: 1px solid var(--border-hairline); padding: 10px 2px; outline: none; transition: border-color var(--duration-standard) var(--ease-out); } .e2e-field input:focus, .e2e-field select:focus, .e2e-field textarea:focus { border-bottom-color: var(--focus-ring); } .e2e-field select { appearance: none; -webkit-appearance: none; background-image: none; } /* ========================================================================== TOAST (contact form confirmation) ========================================================================== */ .e2e-toast { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--brown-900); border-left: 3px solid var(--gold-500); color: var(--white); padding: 14px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); font-size: 14px; } .e2e-toast button { background: none; border: none; color: var(--brown-200, #cbb9ad); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; } .e2e-toast[hidden] { display: none; } /* ========================================================================== QUOTE BLOCKS (testimonials) ========================================================================== */ .e2e-quote { border-left: 3px solid var(--teal-600); padding-left: 20px; display: flex; flex-direction: column; gap: 14px; } .e2e-quote p { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); color: var(--text-primary); margin: 0; } .e2e-quote__stamp { display: inline-flex; align-self: flex-start; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; background: var(--brown-900); color: var(--white); padding: 5px 10px; border-radius: var(--radius-sm); } /* ========================================================================== PILLAR STRIP (Home — Invested / Equitable / Always) ========================================================================== */ .e2e-pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); } .e2e-pillar { padding: 40px var(--space-8); border-left: 1px solid var(--border-hairline); display: flex; flex-direction: column; gap: 10px; } .e2e-pillar:first-child { border-left: none; } .e2e-pillar__num { font-size: 12px; font-weight: 700; color: var(--gold-600); letter-spacing: 0.06em; } .e2e-pillar__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--brown-900); margin: 0; } .e2e-pillar__desc { font-size: var(--text-body-sm-size); color: var(--text-secondary); margin: 0; } @media (max-width: 720px) { .e2e-pillars { grid-template-columns: 1fr; } .e2e-pillar { border-left: none; border-top: 1px solid var(--border-hairline); } .e2e-pillar:first-child { border-top: none; } } /* ========================================================================== PHOTO PANELS (hero / passion / contact / about — full-bleed with gradient) ========================================================================== */ .e2e-photo-panel { position: relative; overflow: hidden; min-height: 420px; background: var(--brown-900); display: flex; align-items: flex-end; padding: 20px; } .e2e-photo-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .e2e-photo-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.45), transparent 40%); } .e2e-photo-panel__caption { position: relative; z-index: 1; font-size: 12px; color: var(--white); } /* ========================================================================== EMBER PARTICLES (ambient diya motif) ========================================================================== */ @keyframes e2eEmberRise { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 15% { opacity: 0.9; } 85% { opacity: 0.45; } 100% { transform: translateY(-170px) scale(1.15); opacity: 0; } } .e2e-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .e2e-ember { position: absolute; bottom: -12px; border-radius: 50%; animation: e2eEmberRise 7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .e2e-ember { animation: none; opacity: 0.35; transform: translateY(-60px); } .e2e-nav-toggle span { transition: none; } } /* ========================================================================== FOOTER ========================================================================== */ .e2e-footer { background: var(--brown-900); color: var(--white); padding: var(--space-8); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; overflow: hidden; } .e2e-footer h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-display-sm-size); margin: 0; position: relative; z-index: 1; } .e2e-footer p { max-width: 50ch; color: var(--brown-200, #cbb9ad); margin: 0; position: relative; z-index: 1; } .e2e-footer__links { display: flex; gap: 20px; margin-top: 12px; font-size: 13px; position: relative; z-index: 1; } .e2e-footer__links a { display: inline-flex; align-items: center; gap: 7px; color: var(--brown-200, #cbb9ad); } .e2e-footer__links svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; } .e2e-footer__copyright { font-size: 12px; color: var(--brown-500, #8a7c72); position: relative; z-index: 1; } /* ========================================================================== RESPONSIVE — generic section stacking ========================================================================== */ @media (max-width: 900px) { .e2e-split { flex-direction: column !important; } .e2e-split > * { flex-basis: auto !important; } .e2e-grid-3 { grid-template-columns: 1fr !important; } .e2e-grid-2 { grid-template-columns: 1fr !important; } .e2e-pad-lg { padding: var(--space-7) var(--space-5) !important; } }