Spaces:
Running
Running
| :root { | |
| --green-950: #06140c; | |
| --green-900: #0d2818; | |
| --green-800: #163d26; | |
| --green-700: #1b4332; | |
| --green-600: #2d6a4f; | |
| --gold-400: #f0b35a; | |
| --gold-500: #e69138; | |
| --gold-600: #c97822; | |
| --cream: #f4efe4; | |
| --mist: rgba(244, 239, 228, 0.72); | |
| --ink: #f7f3ea; | |
| --font-display: "Oswald", "Arial Narrow", sans-serif; | |
| --font-body: "Sora", system-ui, sans-serif; | |
| --ease: cubic-bezier(0.22, 1, 0.36, 1); | |
| --header-h: 4.25rem; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: var(--font-body); | |
| color: var(--ink); | |
| background: var(--green-950); | |
| line-height: 1.55; | |
| overflow-x: hidden; | |
| } | |
| img { | |
| max-width: 100%; | |
| display: block; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| .skip { | |
| position: absolute; | |
| left: -999px; | |
| top: 0; | |
| background: var(--gold-500); | |
| color: var(--green-950); | |
| padding: 0.5rem 1rem; | |
| z-index: 100; | |
| } | |
| .skip:focus { | |
| left: 0.75rem; | |
| top: 0.75rem; | |
| } | |
| .site-header { | |
| position: fixed; | |
| inset: 0 0 auto; | |
| z-index: 40; | |
| height: var(--header-h); | |
| display: flex; | |
| align-items: center; | |
| gap: 1.25rem; | |
| padding: 0 clamp(1rem, 4vw, 2.5rem); | |
| background: linear-gradient(180deg, rgba(6, 20, 12, 0.88), rgba(6, 20, 12, 0.35) 70%, transparent); | |
| transition: background 0.35s var(--ease), backdrop-filter 0.35s var(--ease); | |
| } | |
| .site-header.is-solid { | |
| background: rgba(6, 20, 12, 0.92); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(240, 179, 90, 0.12); | |
| } | |
| .brand-lockup { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.65rem; | |
| font-family: var(--font-display); | |
| font-weight: 600; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| font-size: 0.95rem; | |
| } | |
| .brand-lockup img { | |
| width: 2.35rem; | |
| height: 2.35rem; | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 1px rgba(240, 179, 90, 0.35); | |
| } | |
| .nav { | |
| margin-left: auto; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| gap: 0.65rem 1.15rem; | |
| font-size: 0.82rem; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| max-width: min(28rem, 58vw); | |
| } | |
| .nav a { | |
| color: var(--mist); | |
| transition: color 0.2s ease; | |
| } | |
| .nav a:hover, | |
| .nav a:focus-visible { | |
| color: var(--gold-400); | |
| } | |
| .version-pill { | |
| font-size: 0.7rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--green-950); | |
| background: var(--gold-400); | |
| padding: 0.28rem 0.55rem; | |
| border-radius: 999px; | |
| font-weight: 600; | |
| } | |
| .hero { | |
| position: relative; | |
| min-height: 100svh; | |
| display: grid; | |
| align-items: end; | |
| padding: calc(var(--header-h) + 1.5rem) clamp(1rem, 5vw, 3.5rem) 4.5rem; | |
| isolation: isolate; | |
| } | |
| .hero-media { | |
| position: absolute; | |
| inset: 0; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .hero-photo { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| object-position: 58% 18%; | |
| transform: scale(1.08); | |
| animation: hero-drift 18s var(--ease) infinite alternate; | |
| } | |
| .hero-veil { | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| linear-gradient(105deg, rgba(6, 20, 12, 0.92) 0%, rgba(6, 20, 12, 0.72) 42%, rgba(13, 40, 24, 0.45) 100%), | |
| linear-gradient(0deg, rgba(6, 20, 12, 0.95) 0%, transparent 42%); | |
| } | |
| .hero-grain { | |
| position: absolute; | |
| inset: 0; | |
| opacity: 0.18; | |
| pointer-events: none; | |
| background-image: radial-gradient(rgba(244, 239, 228, 0.25) 0.5px, transparent 0.5px); | |
| background-size: 3px 3px; | |
| mix-blend-mode: soft-light; | |
| } | |
| .hero-inner { | |
| max-width: 38rem; | |
| } | |
| .hero-crest { | |
| width: clamp(7.5rem, 18vw, 10.5rem); | |
| height: auto; | |
| border-radius: 50%; | |
| margin-bottom: 1.35rem; | |
| box-shadow: | |
| 0 0 0 3px rgba(240, 179, 90, 0.35), | |
| 0 18px 50px rgba(0, 0, 0, 0.45); | |
| animation: crest-in 1.1s var(--ease) both; | |
| } | |
| .hero-brand { | |
| margin: 0 0 0.35rem; | |
| font-family: var(--font-display); | |
| font-size: clamp(2.8rem, 9vw, 5.4rem); | |
| line-height: 0.92; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| color: var(--gold-400); | |
| text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); | |
| animation: rise 0.9s 0.15s var(--ease) both; | |
| } | |
| .hero-title { | |
| margin: 0 0 0.85rem; | |
| font-family: var(--font-display); | |
| font-weight: 600; | |
| font-size: clamp(1.55rem, 3.8vw, 2.35rem); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--cream); | |
| animation: rise 0.9s 0.28s var(--ease) both; | |
| } | |
| .hero-lead { | |
| margin: 0 0 1.6rem; | |
| max-width: 32rem; | |
| color: var(--mist); | |
| font-size: 1.02rem; | |
| animation: rise 0.9s 0.4s var(--ease) both; | |
| } | |
| .hero-ctas { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| animation: rise 0.9s 0.52s var(--ease) both; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 2.85rem; | |
| padding: 0.7rem 1.25rem; | |
| font-family: var(--font-display); | |
| font-size: 0.95rem; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| border: 1px solid transparent; | |
| transition: transform 0.2s var(--ease), background 0.2s ease, color 0.2s ease, border-color 0.2s ease; | |
| } | |
| .btn:hover, | |
| .btn:focus-visible { | |
| transform: translateY(-2px); | |
| } | |
| .btn-gold { | |
| background: var(--gold-500); | |
| color: var(--green-950); | |
| } | |
| .btn-gold:hover, | |
| .btn-gold:focus-visible { | |
| background: var(--gold-400); | |
| } | |
| .btn-ghost { | |
| border-color: rgba(244, 239, 228, 0.35); | |
| color: var(--cream); | |
| background: rgba(6, 20, 12, 0.25); | |
| } | |
| .btn-ghost:hover, | |
| .btn-ghost:focus-visible { | |
| border-color: var(--gold-400); | |
| color: var(--gold-400); | |
| } | |
| .hero-scroll { | |
| position: absolute; | |
| left: 50%; | |
| bottom: 1.25rem; | |
| transform: translateX(-50%); | |
| width: 1.1rem; | |
| height: 1.8rem; | |
| border: 1px solid rgba(244, 239, 228, 0.35); | |
| border-radius: 999px; | |
| opacity: 0.7; | |
| } | |
| .hero-scroll span { | |
| display: block; | |
| width: 0.28rem; | |
| height: 0.28rem; | |
| margin: 0.35rem auto 0; | |
| border-radius: 50%; | |
| background: var(--gold-400); | |
| animation: scroll-dot 1.6s ease infinite; | |
| } | |
| .section { | |
| padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1rem, 5vw, 3.5rem); | |
| } | |
| .eyebrow { | |
| margin: 0 0 0.55rem; | |
| font-family: var(--font-display); | |
| font-size: 0.8rem; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| color: var(--gold-400); | |
| } | |
| .section h2 { | |
| margin: 0 0 1rem; | |
| font-family: var(--font-display); | |
| font-size: clamp(2rem, 5vw, 3.1rem); | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| line-height: 1.05; | |
| } | |
| .section-lead { | |
| margin: 0; | |
| max-width: 40rem; | |
| color: var(--mist); | |
| font-size: 1.05rem; | |
| } | |
| .about { | |
| display: grid; | |
| gap: 2.5rem; | |
| background: | |
| radial-gradient(ellipse at 10% 0%, rgba(230, 145, 56, 0.12), transparent 45%), | |
| linear-gradient(180deg, var(--green-900), var(--green-950)); | |
| } | |
| @media (min-width: 880px) { | |
| .about { | |
| grid-template-columns: 1.2fr 1fr; | |
| align-items: end; | |
| } | |
| } | |
| .facts { | |
| margin: 0; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1.25rem 1.5rem; | |
| } | |
| .facts div { | |
| padding-top: 0.85rem; | |
| border-top: 1px solid rgba(240, 179, 90, 0.28); | |
| } | |
| .facts dt { | |
| font-size: 0.72rem; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| color: var(--gold-400); | |
| margin-bottom: 0.35rem; | |
| } | |
| .facts dd { | |
| margin: 0; | |
| font-family: var(--font-display); | |
| font-size: 1.35rem; | |
| letter-spacing: 0.03em; | |
| text-transform: uppercase; | |
| } | |
| .spirit { | |
| display: grid; | |
| gap: 1.75rem; | |
| background: var(--green-950); | |
| } | |
| @media (min-width: 900px) { | |
| .spirit { | |
| grid-template-columns: 1.05fr 1fr; | |
| align-items: center; | |
| gap: 3rem; | |
| } | |
| } | |
| .spirit-visual { | |
| position: relative; | |
| min-height: 22rem; | |
| overflow: hidden; | |
| } | |
| .spirit-visual img { | |
| width: 100%; | |
| height: 100%; | |
| min-height: 22rem; | |
| object-fit: cover; | |
| object-position: center 15%; | |
| filter: saturate(1.05) contrast(1.05); | |
| } | |
| .spirit-visual::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(90deg, transparent 55%, rgba(6, 20, 12, 0.55)); | |
| pointer-events: none; | |
| } | |
| .spirit-copy blockquote { | |
| margin: 0 0 1.1rem; | |
| padding-left: 1rem; | |
| border-left: 3px solid var(--gold-500); | |
| font-size: 1.15rem; | |
| color: var(--cream); | |
| font-weight: 500; | |
| } | |
| .spirit-copy p:last-child { | |
| margin: 0; | |
| color: var(--mist); | |
| } | |
| .connect { | |
| background: | |
| linear-gradient(180deg, rgba(22, 61, 38, 0.55), rgba(6, 20, 12, 0.95)), | |
| var(--green-900); | |
| } | |
| .social-list { | |
| list-style: none; | |
| margin: 2rem 0 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 0.85rem; | |
| } | |
| .social-link { | |
| display: grid; | |
| gap: 0.2rem; | |
| padding: 1.15rem 0; | |
| border-top: 1px solid rgba(244, 239, 228, 0.14); | |
| transition: color 0.2s ease, padding-left 0.25s var(--ease); | |
| } | |
| .social-link:hover, | |
| .social-link:focus-visible { | |
| color: var(--gold-400); | |
| padding-left: 0.45rem; | |
| } | |
| .social-name { | |
| font-family: var(--font-display); | |
| font-size: 1.45rem; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .social-handle { | |
| font-size: 0.92rem; | |
| color: var(--mist); | |
| } | |
| .social-link:hover .social-handle, | |
| .social-link:focus-visible .social-handle { | |
| color: inherit; | |
| } | |
| .social-meta { | |
| font-size: 0.85rem; | |
| color: rgba(244, 239, 228, 0.55); | |
| } | |
| .collaborate { | |
| background: linear-gradient(165deg, #0a1f14 0%, var(--green-900) 48%, #07160e 100%); | |
| } | |
| .collaborate-grid { | |
| margin-top: 2rem; | |
| display: grid; | |
| gap: 2rem; | |
| } | |
| @media (min-width: 900px) { | |
| .collaborate-grid { | |
| grid-template-columns: 0.95fr 1.05fr; | |
| gap: 2.5rem; | |
| align-items: start; | |
| } | |
| } | |
| .collaborate-pillars { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| display: grid; | |
| gap: 1.15rem; | |
| } | |
| .collaborate-pillars h3 { | |
| margin: 0 0 0.35rem; | |
| font-family: var(--font-display); | |
| font-size: 1.2rem; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--gold-400); | |
| } | |
| .collaborate-pillars p { | |
| margin: 0; | |
| color: var(--mist); | |
| font-size: 0.95rem; | |
| } | |
| .collaborate-form { | |
| display: grid; | |
| gap: 0.95rem; | |
| padding: 1.35rem 1.25rem 1.45rem; | |
| border: 1px solid rgba(240, 179, 90, 0.22); | |
| background: rgba(6, 20, 12, 0.55); | |
| } | |
| .form-group { | |
| display: grid; | |
| gap: 0.35rem; | |
| } | |
| .form-group label { | |
| font-size: 0.78rem; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--mist); | |
| } | |
| .form-group input, | |
| .form-group select, | |
| .form-group textarea { | |
| width: 100%; | |
| border: 1px solid rgba(244, 239, 228, 0.18); | |
| background: rgba(4, 13, 8, 0.85); | |
| color: var(--ink); | |
| font: inherit; | |
| padding: 0.7rem 0.8rem; | |
| border-radius: 0; | |
| } | |
| .form-group input:focus, | |
| .form-group select:focus, | |
| .form-group textarea:focus { | |
| outline: 2px solid rgba(240, 179, 90, 0.55); | |
| outline-offset: 1px; | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| min-height: 6.5rem; | |
| } | |
| .collaborate-form .btn { | |
| justify-self: start; | |
| margin-top: 0.25rem; | |
| } | |
| .form-status { | |
| margin: 0; | |
| min-height: 1.25rem; | |
| font-size: 0.88rem; | |
| color: var(--mist); | |
| } | |
| .form-status[data-state="ok"] { | |
| color: var(--gold-400); | |
| } | |
| .form-status[data-state="error"] { | |
| color: #ffb4a2; | |
| } | |
| .site-footer { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 1rem 1.5rem; | |
| padding: 2rem clamp(1rem, 5vw, 3.5rem) 2.5rem; | |
| border-top: 1px solid rgba(240, 179, 90, 0.18); | |
| background: #040d08; | |
| } | |
| .site-footer img { | |
| border-radius: 50%; | |
| } | |
| .footer-brand { | |
| margin: 0; | |
| font-family: var(--font-display); | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .footer-motto, | |
| .footer-meta { | |
| margin: 0.15rem 0 0; | |
| color: var(--mist); | |
| font-size: 0.85rem; | |
| } | |
| .footer-meta { | |
| margin-left: auto; | |
| } | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(1.25rem); | |
| transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); | |
| } | |
| .reveal.is-in { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| @keyframes crest-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(1rem) scale(0.92); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| } | |
| @keyframes rise { | |
| from { | |
| opacity: 0; | |
| transform: translateY(1.1rem); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| } | |
| @keyframes hero-drift { | |
| from { | |
| transform: scale(1.08) translate3d(0, 0, 0); | |
| } | |
| to { | |
| transform: scale(1.14) translate3d(-1.5%, -1%, 0); | |
| } | |
| } | |
| @keyframes scroll-dot { | |
| 0% { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| 80% { | |
| opacity: 0; | |
| transform: translateY(0.85rem); | |
| } | |
| 100% { | |
| opacity: 0; | |
| transform: translateY(0.85rem); | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| .site-header { | |
| height: auto; | |
| min-height: var(--header-h); | |
| flex-wrap: wrap; | |
| padding-top: 0.65rem; | |
| padding-bottom: 0.65rem; | |
| gap: 0.55rem 0.85rem; | |
| } | |
| .nav { | |
| order: 3; | |
| width: 100%; | |
| max-width: none; | |
| justify-content: flex-start; | |
| gap: 0.55rem 0.95rem; | |
| font-size: 0.75rem; | |
| } | |
| .version-pill { | |
| margin-left: auto; | |
| } | |
| .hero { | |
| align-items: center; | |
| padding-bottom: 5rem; | |
| } | |
| .hero-photo { | |
| object-position: 70% 12%; | |
| } | |
| .footer-meta { | |
| margin-left: 0; | |
| width: 100%; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { | |
| scroll-behavior: auto; | |
| } | |
| .hero-photo, | |
| .hero-crest, | |
| .hero-brand, | |
| .hero-title, | |
| .hero-lead, | |
| .hero-ctas, | |
| .hero-scroll span, | |
| .reveal { | |
| animation: none ; | |
| transition: none ; | |
| opacity: 1 ; | |
| transform: none ; | |
| } | |
| } | |