/* ========================================================================== Energy Ranch - Power the Frontier Single stylesheet. Sections: 1. Base reset 2. Design tokens 3. Global / header / footer 4. Home page sections 5. Contact page 6. Responsive 7. Reduced motion ========================================================================== */ /* -------------------------------------------------------------------------- 1. BASE RESET -------------------------------------------------------------------------- */ *,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0} html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;-webkit-tap-highlight-color:transparent} h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit} a{color:inherit;text-decoration:inherit} b,strong{font-weight:bolder} small{font-size:80%} ol,ul,menu{list-style:none} img,svg,video,canvas,iframe{vertical-align:middle;display:block} img,video{max-width:100%;height:auto} button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit;background-color:#0000;border-radius:0} button,input:where([type=button],[type=reset],[type=submit]){appearance:button} textarea{resize:vertical} ::placeholder{opacity:1} [hidden]{display:none!important} /* -------------------------------------------------------------------------- 2. DESIGN TOKENS -------------------------------------------------------------------------- */ :root{ --ink:#0a0b0b; --paper:#e7e4dc; --muted:#a7aaa3; --line:#2b2d2b; --signal:#d6ff3f; --signal-deep:#6f8a12; /* --signal is unreadable on --paper */ --rust:#9e4f35; --font-geist-sans:"Geist","Helvetica Neue",Arial,sans-serif; --font-geist-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } /* -------------------------------------------------------------------------- 3. GLOBAL / HEADER / FOOTER -------------------------------------------------------------------------- */ html{scroll-behavior:smooth;background:var(--ink)} body{background:var(--ink);color:var(--paper);font-family:var(--font-geist-sans);margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} a{color:inherit;text-decoration:none} .site-header{border-bottom:1px solid var(--line);z-index:20;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0a0b0be6;justify-content:space-between;align-items:center;height:70px;padding:0 3.2vw;display:flex;position:sticky;top:0} /* Brand lockup - unchanged from the original build. */ .brand{letter-spacing:.08em;align-items:center;gap:14px;font-weight:700;display:flex} /* One mark system shared across HC Capital, Energy Ranch and WranglerX: a square box, a border of 7% of the box, and a corner square pinned outside the lower right at 19.6% of the box. Everything derives from --box, so changing that one value rescales the whole mark. */ .brand-mark{--box:44px;--stroke:calc(var(--box)*.07);--dot:calc(var(--box)*.196); border:var(--stroke) solid var(--paper);width:var(--box);height:var(--box); font-size:calc(var(--box)*.35);flex:none;place-items:center;display:grid;position:relative} .brand-mark:after{content:"";background:var(--signal);width:var(--dot);height:var(--dot);position:absolute; bottom:calc(var(--dot)*-.44);right:calc(var(--dot)*-.44)} .brand-name{font-size:13px} .brand-flag{filter:saturate(.9);margin-left:2px;font-size:22px;line-height:1} nav{align-items:center;height:100%;display:flex} nav a{border-left:1px solid var(--line);height:100%;font-family:var(--font-geist-mono);letter-spacing:.14em;text-transform:uppercase;place-items:center;padding:0 24px;font-size:13px;display:grid;position:relative;transition:color .28s ease,background-color .28s ease} .nav-cta{border-right:1px solid var(--line);color:var(--signal)} /* Hover / focus: a hairline of signal green wipes in from the left along the header's baseline, sitting directly on the header's own bottom border, so it reads as that line lighting up under the active item. */ nav a:before{content:"";background:var(--signal);transform-origin:0;transform:scaleX(0);transition:transform .4s cubic-bezier(.22,.61,.36,1);position:absolute;bottom:0;left:0;right:0;height:1px} nav a:hover:before,nav a:focus-visible:before{transform:scaleX(1)} nav a:hover,nav a:focus-visible{color:var(--signal);background:#d6ff3f08;outline:none} /* The one call to action inverts to a solid fill instead - the same treatment the inquiry button uses, keeping both primary actions consistent. */ .nav-cta:before{display:none} .nav-cta:hover,.nav-cta:focus-visible{background:var(--signal);border-color:var(--signal);color:var(--ink)} nav a[aria-current=page]{background:#d6ff3f0f} nav a[aria-current=page]:before{transform:scaleX(1)} /* Menu button. Hidden until the tablet breakpoint, where the responsive section turns it on and converts