/* Shared design tokens + nav mechanics for index.html, dialogue.html, teacher-training.html, blog.html, events.html. Nav has two color themes applied per-page (small residual CSS in each file): "static" (green text, used on index/blog/events) and "hero" (cream text that turns green on scroll, used on dialogue/teacher-training, for pages with a full-bleed image behind the transparent nav). */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Outfit:wght@400;500;600&display=swap'); :root{ --green:#2C4A3E; --gold:#B8860B; --gold-light:#D4A843; --cream:#FAF6F0; --warm-white:#FFFDF9; --charcoal:#2A2A2A; --muted:#7A7A6E; --sand:#E8E0D4; --soft-green:#E8F0EB; --card:#fff; --green2:#2C7A52; --font-serif:'Cormorant Garamond',Georgia,serif; --font-sans:'Outfit',system-ui,sans-serif; --section-pad:100px 40px; --max-w:1100px; --transition:0.3s ease; } @media(max-width:768px){:root{--section-pad:72px 24px}} /* ============================================================ NAV — shared mechanics (position, layout, hamburger, breakpoint). Color theme (text color / hover / toggle-bar color) is page-specific. ============================================================ */ #nav{position:fixed;top:0;left:0;right:0;z-index:1000; padding:14px 40px;display:flex;align-items:center;justify-content:space-between; transition:background var(--transition),backdrop-filter var(--transition),box-shadow var(--transition)} #nav.scrolled{background:rgba(255,253,249,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:0 1px 0 rgba(44,74,62,.1)} .nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-serif); font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:.01em} .nav-logo-img{height:44px;width:auto} .nav-links{display:flex;gap:36px;list-style:none} .nav-links a{font-family:var(--font-sans);font-size:.85rem;font-weight:400;letter-spacing:.06em; text-transform:uppercase;transition:color var(--transition)} .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px; width:28px;height:22px;background:none;border:none;padding:0;cursor:pointer;z-index:1001} .nav-toggle span{display:block;width:100%;height:2px;border-radius:1px; transition:transform .25s ease,opacity .25s ease,background .3s ease} #nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} #nav.menu-open .nav-toggle span:nth-child(2){opacity:0} #nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:768px){ #nav{padding:12px 24px} .nav-toggle{display:flex} .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0; background:rgba(255,253,249,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); box-shadow:0 12px 24px rgba(44,74,62,.12);padding:8px 24px 20px} #nav.menu-open .nav-links{display:flex} .nav-links a{display:block;padding:14px 0;border-bottom:1px solid var(--sand)} } /* ============================================================ BUTTONS — shared across index.html, dialogue.html, teacher-training.html. Page-specific variants (.btn--green, .btn--gold, .btn--on-dark, etc.) stay defined in their own page. ============================================================ */ .btn{display:inline-block;font-family:var(--font-sans);font-size:.78rem;font-weight:500; letter-spacing:.15em;text-transform:uppercase;padding:16px 36px;border-radius:999px; border:1px solid var(--gold);color:var(--gold);background:transparent;cursor:pointer; transition:background var(--transition),color var(--transition),border-color var(--transition)} .btn:hover{background:var(--gold);color:var(--warm-white)} .btn--filled{background:var(--gold);color:var(--warm-white);border-color:var(--gold)} .btn--filled:hover{background:var(--gold-light);border-color:var(--gold-light)} .container{max-width:var(--max-w);margin:0 auto;padding:0 40px} @media(max-width:768px){.container{padding:0 24px}} /* ============================================================ Shared page-head + empty-state (blog.html / events.html) ============================================================ */ .page-head .label{color:var(--gold);letter-spacing:.18em;text-transform:uppercase;font-size:.95rem;font-weight:600} .page-head h1{font-size:3rem;margin:.1em 0} .page-head p{color:var(--muted);font-size:1.2rem;margin:0} .empty{text-align:center;color:var(--muted);padding:40px 0} /* ============================================================ FOOTER — global, identical on all 5 pages. ============================================================ */ footer#site-footer{background:var(--green);color:rgba(250,246,240,.75);font-size:.92rem;flex-shrink:0} /* #site-footer prefix bumps specificity above pages' own inline .container rule (padding:0 40px), which otherwise wins the padding-top/bottom cascade on index.html/dialogue.html/teacher-training.html since their inline