/* ========================================================================== HC Capital Partners - Power-Linked Infrastructure Single stylesheet. Sections: 1. Base reset (Tailwind v4 preflight, unchanged from the original build) 2. Design tokens 3. Global / header / footer 4. Home page sections 5. Contact page 6. Responsive ========================================================================== */ /* -------------------------------------------------------------------------- 1. BASE RESET - Tailwind v4 preflight (kept verbatim from the original build) -------------------------------------------------------------------------- */ :root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)} *,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0} ::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0} html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family);-webkit-tap-highlight-color:transparent} hr{height:0;color:inherit;border-top-width:1px} abbr:where([title]){text-decoration:underline dotted} h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit} a{color:inherit;text-decoration:inherit} b,strong{font-weight:bolder} code,kbd,samp,pre{font-family:var(--default-mono-font-family);font-size:1em} small{font-size:80%} sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative} sub{bottom:-.25em} sup{top:-.5em} table{text-indent:0;border-color:inherit;border-collapse:collapse} :-moz-focusring{outline:auto} progress{vertical-align:baseline} summary{display:list-item} ol,ul,menu{list-style:none} img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block} img,video{max-width:100%;height:auto} button,input,select,optgroup,textarea{font:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0} ::file-selector-button{font:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0} :where(select:is([multiple],[size])) optgroup{font-weight:bolder} :where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px} ::file-selector-button{margin-inline-end:4px} ::placeholder{opacity:1} textarea{resize:vertical} ::-webkit-search-decoration{-webkit-appearance:none} ::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto} button,input:where([type=button],[type=reset],[type=submit]){appearance:button} ::file-selector-button{appearance:button} [hidden]:where(:not([hidden=until-found])){display:none!important} /* -------------------------------------------------------------------------- 2. DESIGN TOKENS -------------------------------------------------------------------------- */ :root{ --ink:#0b0c0c; --carbon:#151718; --paper:#efede6; --muted:#9a9c98; --line:#343738; --orange:#ff5a1f; --green:#c7f33a; --green-deep:#6f8614; /* --green is too light to read on --paper */ --font-geist-sans:"Geist","Helvetica Neue",Arial,sans-serif; --font-geist-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } /* -------------------------------------------------------------------------- 3. GLOBAL / HEADER / FOOTER -------------------------------------------------------------------------- */ *{box-sizing:border-box} 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} header{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:#0b0c0cf0;justify-content:space-between;align-items:center;height:76px;padding:0 3vw;display:flex;position:sticky;top:0} .brand{align-items:center;gap:13px;display:flex} /* Logo mark - HC monogram. One mark system shared across HC Capital, Energy Ranch and WranglerX: a square box, a border of 7% of the box (the weight of the original HC frame), and a corner square pinned outside the lower right at 19.6% of the box. Only the contents and the corner square's color differ between the three brands. Everything derives from --box, so changing that one value rescales the whole mark. The SVG holds only the H/C letterforms; the frame and the corner square are drawn here. `currentColor` means the mark inherits its context's color. */ .hc{--box:44px;--stroke:calc(var(--box)*.07);--dot:calc(var(--box)*.196); color:var(--paper);border:var(--stroke) solid currentColor;width:var(--box);height:var(--box); flex:none;place-items:center;display:grid;position:relative} .hc:after{content:"";background:var(--paper);width:var(--dot);height:var(--dot);position:absolute; bottom:calc(var(--dot)*-.44);right:calc(var(--dot)*-.44)} .hc svg{fill:currentColor;width:calc(var(--box)*.46);height:calc(var(--box)*.415);display:block} .brand>span:nth-child(2){flex-direction:column;display:flex} .brand strong{letter-spacing:.12em;font-size:13px} .brand small{font:10px var(--font-geist-mono);letter-spacing:.15em;color:var(--muted);margin-top:4px} .brand b{font-size:20px;font-weight:400} nav{height:100%;display:flex} nav a{border-left:1px solid var(--line);font:13px var(--font-geist-mono);letter-spacing:.14em;text-transform:uppercase;place-items:center;padding:0 24px;display:grid;position:relative;transition:color .28s ease,background-color .28s ease} nav a:last-child{border-right:1px solid var(--line);color:var(--green)} /* Hover / focus: a hairline of green wipes in from the left along the header's baseline, and the label warms to the accent color. The rule sits directly on top of the header's bottom border, so the effect reads as that existing line lighting up under the active item rather than as a new element appearing. */ nav a:before{content:"";background:var(--green);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{color:var(--green);background:#c7f33a08} nav a:focus-visible{outline:none;color:var(--green);background:#c7f33a08} /* CONNECT is the one call to action, so it inverts to a solid fill instead - the same green-on-ink treatment the inquiry button uses, keeping the two primary actions on the site visually consistent. */ nav a:last-child:before{display:none} nav a:last-child:hover,nav a:last-child:focus-visible{background:var(--green);border-color:var(--green);color:var(--ink)} /* Current page, when the nav marks one with aria-current */ nav a[aria-current=page]{background:#c7f33a0f} nav a[aria-current=page]:before{transform:scaleX(1)} /* Menu button. Hidden until the tablet breakpoint, where the responsive section below turns it on and converts