/* ============================================================ Cosmos Wealth — global.css Brand foundation shared by every page: tokens, base type, buttons, section rhythm, shared header (nav) + footer. Page-specific section styles live on each page. Source of truth: PROJECT.md ============================================================ */ /* --- Brand color tokens (PROJECT.md Section 1, official values) --- */ :root{ --offblack:#090908; --ink:#090908; --cream:#F9F8F4; --offwhite:#FDFDFD; --mgrey:#A39A93; --dgrey:#746D68; --cobalt:#3863A8; --cobalt-lt:#FDFDFD; /* cobalt accent — ACTIVATED (first use: nav CTA arrow) */ font-size:clamp(13px, calc(100vw / 90), 38px); /* fluid root — whole design scales proportionally (fills up to ~3440px) */ --font:"DM Sans","Helvetica Neue",Arial,sans-serif; } /* --- Fonts --- Currently loaded from Google Fonts in (see base.njk). To self-host per PROJECT.md Section 2, drop DM Sans .woff2 files in src/assets/fonts/ and declare @font-face here, then remove the Google Fonts from base.njk. Example: @font-face{ font-family:"DM Sans"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/assets/fonts/DMSans.woff2") format("woff2"); } */ /* --- Base --- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font);font-weight:500;color:var(--ink);background:var(--cream);line-height:1.6;font-size:clamp(1.1875rem,1.7vw,1.5rem);-webkit-font-smoothing:antialiased} .wrap{max-width:92.5rem;margin:0 auto;padding:0 2.5rem} h1,h2,h3{font-family:var(--font);font-weight:500} .btn{display:inline-block;font-family:var(--font);font-size:1.0625rem;font-weight:600;padding:1rem 2.125rem;border-radius:6.25rem;text-decoration:none;transition:.22s;cursor:pointer;border:none} .btn-cream{background:var(--offwhite);color:var(--offblack)} .btn.btn-cream{transition:background .25s ease,color .25s ease,transform .25s ease} .btn.btn-cream:hover{background:var(--cobalt);color:var(--offwhite);transform:translateY(-0.1875rem)} /* Reusable arrow CTA — dark pill + cobalt arrow circle, matching the nav "Let's chat" */ .cta-btn{display:inline-flex;align-items:center;gap:1rem;padding:0.625rem 0.625rem 0.625rem 1.75rem;border-radius:6.25rem;background:var(--offblack);color:var(--offwhite);text-decoration:none;font-family:var(--font);font-weight:600;font-size:1.0625rem;transition:transform .25s ease} .cta-btn:hover{transform:translateY(-0.125rem)} .cta-btn .cta-ic{flex-shrink:0;width:2.625rem;height:2.625rem;border-radius:50%;background:var(--cobalt);display:flex;align-items:center;justify-content:center;transition:transform .25s ease} .cta-btn .cta-ic svg{width:1.125rem;height:1.125rem;display:block} .cta-btn:hover .cta-ic{transform:translate(0.125rem,-0.125rem)} section{padding:7.125rem 0} h2.title{font-size:clamp(2.5rem,5.6vw,4.5rem);line-height:1.04;letter-spacing:-.02em;font-weight:500} /* Shared fade-in utility (driven by the global IntersectionObserver in base.njk) */ .fade{opacity:0;transform:translateY(1.375rem);transition:opacity .7s ease,transform .7s ease} .fade.in{opacity:1;transform:none} /* Shared header reveal — staggered per-character "mask rise". base.njk splits every h1/h2 into .reveal-word (overflow clip) > .reveal-char, then adds .reveal-in when the header scrolls into view so the letters rise up from behind the mask, cascading left→right. One system, every header, every page. */ .reveal-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em} .reveal-char{display:inline-block;will-change:transform;transform:translateY(115%);transition:transform .62s cubic-bezier(.16,1,.3,1)} .reveal-in .reveal-char{transform:translateY(0)} .reveal-done .reveal-word{overflow:visible} /* once the rise is finished, stop clipping so tall glyphs / descenders aren't cut off */ @media (prefers-reduced-motion: reduce){ .reveal-char{transform:none;transition:none} } /* --- Custom cursor: a small cobalt dot replaces the pointer (mouse/fine-pointer devices only) --- */ @media (pointer:fine){ *, *::before, *::after{cursor:none !important} .cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;will-change:transform;transition:opacity .25s ease} .cursor.is-hidden{opacity:0} .cursor-in{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #090908,0 1px 3px rgba(0,0,0,.45)} /* white dot with a black outline — constant, no hover change */ } /* --- Header / sticky glass menu (shared: header.njk) --- Three floating pills (logo · links · CTA) with ONE uniform frosted glass. The tint is identical everywhere, so the backdrop-filter frosts whatever is actually behind it — darker over dark sections, lighter over light ones, continuously, with no color swap. True glass, not a theme flip. */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:transform .4s cubic-bezier(.4,0,.2,1);will-change:transform} .nav.nav-hidden{transform:translateY(-130%)} /* slides up out of view on scroll-down */ /* The nav keeps FIXED px sizes (it must NOT scale with the fluid root) — it just spreads across the full width via space-between, so on wide screens the pills space out, same size. */ .nav-in{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:none;margin:0 auto;padding:18px 40px} .logo{display:inline-flex;align-items:center;text-decoration:none} .logo-img{height:23px;width:auto;display:block} /* used by nav + footer */ /* one frosted-glass pill, shared by all three groups */ .nav-pill{ display:flex;align-items:center;border-radius:100px; background:rgba(14,14,13,.55); border:1px solid rgba(255,255,255,.13); box-shadow:0 6px 26px rgba(0,0,0,.22); backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8); } .nav-logo{padding:15px 26px} .nav-menu{gap:6px;padding:7px 8px} .nav-menu a{display:inline-flex;align-items:center;padding:10px 17px;border-radius:100px;font-family:var(--font);font-size:15px;font-weight:500;letter-spacing:-.01em;text-decoration:none;color:rgba(255,255,255,.86);white-space:nowrap;transition:background .25s ease,color .25s ease} .nav-menu a:hover{background:rgba(255,255,255,.12);color:#fff} .nav-menu a.active{background:#fff;color:var(--offblack)} .nav-cta{padding:9px 9px 9px 24px;gap:14px;text-decoration:none;color:#fff;cursor:pointer} .nav-cta-txt{font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap} .nav-cta-arrow{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--cobalt);display:flex;align-items:center;justify-content:center;transition:transform .25s ease} .nav-cta-arrow svg{width:17px;height:17px;display:block} .nav-cta:hover .nav-cta-arrow{transform:translate(2px,-2px)} /* mobile hamburger + drawer (hidden entirely on desktop — nav switches at 860px) */ .nav-burger{display:none;align-items:center;justify-content:center;width:52px;height:52px;padding:0;cursor:pointer;color:#fff} .nav-burger-bars{position:relative;width:20px;height:14px} .nav-burger-bars span{position:absolute;left:0;width:100%;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease,top .3s ease,opacity .2s ease} .nav-burger-bars span:nth-child(1){top:0} .nav-burger-bars span:nth-child(2){top:6px} .nav-burger-bars span:nth-child(3){top:12px} .nav.drawer-open .nav-burger-bars span:nth-child(1){top:6px;transform:rotate(45deg)} .nav.drawer-open .nav-burger-bars span:nth-child(2){opacity:0} .nav.drawer-open .nav-burger-bars span:nth-child(3){top:6px;transform:rotate(-45deg)} .nav-drawer{display:none} @media(max-width:860px){ .nav-in{padding:16px 20px} .nav-logo{padding:13px 22px} .nav-menu,.nav-cta{display:none} .nav-burger{display:inline-flex} .nav-drawer{display:flex;flex-direction:column;position:absolute;top:calc(100% + 8px);left:20px;right:20px;background:rgba(14,14,13,.82);border:1px solid rgba(255,255,255,.13);border-radius:22px;backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 14px 44px rgba(0,0,0,.5);padding:14px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s ease,transform .3s ease} .nav.drawer-open .nav-drawer{opacity:1;transform:none;pointer-events:auto} .nav-drawer a{display:block;font-family:var(--font);color:rgba(255,255,255,.9);text-decoration:none;font-size:17px;font-weight:500;padding:15px 16px;border-radius:12px} .nav-drawer a:hover,.nav-drawer a:focus{background:rgba(255,255,255,.09);color:#fff} .nav-drawer .nav-drawer-cta{margin-top:8px;background:var(--offwhite);color:var(--offblack);text-align:center;font-weight:600} } /* --- Footer (shared: footer.njk) --- */ .site-footer{background:var(--offblack);color:var(--mgrey);padding:5.75rem 0 2.5rem;font-size:0.875rem;border-top:0.0625rem solid rgba(255,255,255,.12)} /* top band: brand + tagline | CTA */ /* SECTION ONE: brand + contact + columns + disclaimer (one block) */ .f-brand{margin-bottom:3rem} .f-logo{height:1.625rem} .f-tagline{margin-top:1.125rem;max-width:21.25rem;font-size:1rem;line-height:1.5;color:var(--mgrey)} .f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;padding:0 0 2.875rem} .f-contact{display:flex;flex-direction:column} .f-line{color:var(--offwhite);text-decoration:none;font-size:1rem;line-height:1.7} .f-line:hover{color:#fff} .f-addr{color:var(--mgrey);font-size:1rem;line-height:1.5;margin-top:0.75rem} .f-social{display:flex;gap:1rem;margin-top:1.375rem} .f-social a{display:inline-flex;color:var(--mgrey);transition:color .2s ease} .f-social a:hover{color:var(--offwhite)} .f-social svg{width:1.375rem;height:1.375rem;display:block} .f-col h4{font-family:var(--font);color:var(--offwhite);font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.125rem;font-weight:600} .f-col a{display:block;color:var(--mgrey);text-decoration:none;margin-bottom:0.75rem;font-size:0.9375rem;font-weight:500} .f-col a:hover{color:var(--offwhite)} /* disclaimer + bottom strip */ .f-disc{font-size:0.8125rem;line-height:1.7;color:rgba(255,255,255,.45);text-align:justify} /* SECTION TWO: bottom strip, divided from section one */ .f-bottom{display:flex;gap:0.5rem 1.375rem;flex-wrap:wrap;margin-top:1.125rem;font-size:0.8125rem;color:rgba(255,255,255,.4)} @media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr;gap:2.375rem 1.5rem}} @media(max-width:560px){.f-grid{grid-template-columns:1fr}}