:root{--cv-black:#030303;--cv-orange:#ff6a00;--cv-white:#f5f5f5;--cv-muted:#999;} .core-values-page{background:#000;color:var(--cv-white);overflow:hidden}.core-values-page *{box-sizing:border-box}.core-values-page a{text-decoration:none}.core-values-page img{display:block;max-width:100%} .cv-hero{position:relative;min-height:610px;background:#000;overflow:hidden;isolation:isolate}.cv-hero-media{position:absolute;inset:0 0 0 42%;z-index:-4;overflow:hidden}.cv-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}.cv-hero-overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#000 0%,#000 32%,rgba(0,0,0,.92) 45%,rgba(0,0,0,.4) 67%,rgba(0,0,0,.16) 100%)}.cv-hero-shape{position:absolute;z-index:-1;top:0;right:28%;width:145px;height:100%;background:#000;clip-path:polygon(0 0,100% 0,52% 50%,100% 100%,0 100%,42% 50%)}.cv-hero-inner{width:min(1400px,calc(100% - 90px));min-height:610px;margin:auto;display:flex;align-items:center}.cv-hero-content{width:52%;padding:75px 0 55px}.cv-eyebrow{display:flex;align-items:center;gap:14px;color:var(--cv-orange);font:800 11px "Space Grotesk",sans-serif;letter-spacing:4px;margin-bottom:20px}.cv-eyebrow i{width:38px;height:2px;background:var(--cv-orange)}.cv-hero h1{margin:0;font:800 clamp(54px,6.2vw,96px)/.91 "Space Grotesk",sans-serif;letter-spacing:-4px;text-transform:uppercase}.cv-hero h1 span,.cv-hero h1 strong{display:block}.cv-hero h1 span{color:#f5f5f5}.cv-hero h1 strong{color:var(--cv-orange)}.cv-orange-rule{width:42px;height:3px;background:var(--cv-orange);margin:27px 0 20px}.cv-hero-content>p{max-width:540px;color:#c1c1c1;font:15px/1.75 Inter,sans-serif;margin:0}.cv-hero-actions{display:flex;gap:15px;margin-top:30px}.cv-btn{min-height:50px;padding:0 21px;display:inline-flex;align-items:center;justify-content:center;gap:11px;border-radius:4px;font:800 10px Inter,sans-serif;letter-spacing:.7px;text-transform:uppercase;transition:.25s}.cv-btn-primary{background:var(--cv-orange);color:#050505;border:1px solid var(--cv-orange)}.cv-btn-primary:hover{background:#fff;border-color:#fff}.cv-btn-outline{color:#fff;border:1px solid rgba(255,106,0,.75);background:rgba(0,0,0,.25)}.cv-btn-outline:hover{background:var(--cv-orange);color:#050505}.cv-play{width:24px;height:24px;border:1px solid var(--cv-orange);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--cv-orange);font-size:8px} .cv-values-section{background:#000;padding:55px 30px 70px}.cv-section-heading{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:28px}.cv-section-heading span{width:48px;height:1px;background:rgba(255,106,0,.55)}.cv-section-heading p{margin:0;color:var(--cv-orange);font:800 11px "Space Grotesk",sans-serif;letter-spacing:4px}.cv-values-stage{position:relative;width:min(1260px,100%);height:500px;margin:auto}.cv-world-dots{position:absolute;left:50%;top:50%;width:760px;height:310px;transform:translate(-50%,-50%);opacity:.12;background-image:radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1.5px);background-size:9px 9px;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}.cv-values-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font:800 clamp(90px,13vw,190px)/.8 "Space Grotesk",sans-serif;letter-spacing:-8px;color:transparent;-webkit-text-stroke:2px var(--cv-orange);user-select:none}.cv-value{position:absolute;z-index:5;width:255px;display:flex;align-items:flex-start;gap:12px}.cv-value-icon{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--cv-orange);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--cv-orange);font-size:18px;background:#030303}.cv-value small{display:block;color:var(--cv-orange);font:800 12px "Space Grotesk",sans-serif;margin-bottom:2px}.cv-value h2{margin:0 0 5px;font:800 16px/1.15 "Space Grotesk",sans-serif;color:#fff}.cv-value p{margin:0;color:#999;font:10px/1.55 Inter,sans-serif}.cv-value-1{top:62px;left:0}.cv-value-2{top:25px;left:50%;transform:translateX(-50%)}.cv-value-3{top:62px;right:0}.cv-value-4{bottom:32px;left:0}.cv-value-5{bottom:5px;left:50%;transform:translateX(-50%)}.cv-value-6{bottom:32px;right:0}.cv-connector{position:absolute;z-index:3;background:var(--cv-orange);opacity:.75;height:1px}.cv-connector:after{content:"";position:absolute;width:5px;height:5px;background:var(--cv-orange);border-radius:50%;top:-2px}.cv-connector-1{width:150px;top:177px;left:205px}.cv-connector-1:after,.cv-connector-4:after{right:0}.cv-connector-2{width:1px;height:95px;top:102px;left:50%}.cv-connector-2:after{left:-2px;bottom:0;top:auto}.cv-connector-3{width:150px;top:177px;right:205px}.cv-connector-3:after,.cv-connector-6:after{left:0}.cv-connector-4{width:150px;bottom:142px;left:205px}.cv-connector-5{width:1px;height:82px;bottom:82px;left:50%}.cv-connector-5:after{left:-2px;top:0}.cv-connector-6{width:150px;bottom:142px;right:205px} .cv-statement{width:min(1260px,calc(100% - 60px));min-height:165px;margin:0 auto 28px;padding:28px 45px;display:flex;align-items:center;background:linear-gradient(115deg,rgba(255,106,0,.045),transparent 35%),#080808;border:1px solid rgba(255,255,255,.11);border-bottom:1px solid rgba(255,106,0,.45);position:relative;overflow:hidden}.cv-statement-mark{color:var(--cv-orange);font:900 92px/1 "Space Grotesk",sans-serif;width:105px;text-align:center}.cv-statement-line{width:1px;height:85px;background:rgba(255,106,0,.55);margin:0 42px}.cv-statement-copy{position:relative;flex:1;display:flex;align-items:center;gap:12px}.cv-quote-mark{color:var(--cv-orange);font:64px/1 Georgia,serif}.cv-quote-end{align-self:flex-end;margin-bottom:-8px}.cv-statement-copy p{max-width:850px;margin:0;color:#ddd;font:clamp(19px,2vw,28px)/1.25 "Space Grotesk",sans-serif}.cv-statement-copy strong{display:block;color:var(--cv-orange)} .cv-stats-section{background:#020202;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.07)}.cv-stats{width:min(1260px,calc(100% - 60px));min-height:92px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr)}.cv-stat{display:flex;align-items:center;gap:15px;padding:18px 24px;border-right:1px solid rgba(255,255,255,.1)}.cv-stat:last-child{border-right:0}.cv-stat>i{color:var(--cv-orange);font-size:22px}.cv-stat strong{display:block;color:#fff;font:800 23px/1 "Space Grotesk",sans-serif}.cv-stat span{display:block;margin-top:5px;color:#777;font:700 8px Inter,sans-serif;letter-spacing:1px}.footer-active{color:var(--cv-orange)!important} @media(max-width:1100px){.cv-hero{min-height:570px}.cv-hero-inner{min-height:570px;width:min(calc(100% - 55px),1000px)}.cv-hero-content{width:57%}.cv-hero-media{left:38%}.cv-value{width:220px}.cv-connector-1,.cv-connector-4{left:180px;width:110px}.cv-connector-3,.cv-connector-6{right:180px;width:110px}} @media(max-width:850px){.cv-hero{min-height:auto}.cv-hero-media{position:relative;inset:auto;height:310px}.cv-hero-overlay{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.2) 45%,#000 100%)}.cv-hero-shape{display:none}.cv-hero-inner{min-height:auto;width:100%;display:flex}.cv-hero-content{width:100%;padding:75px 30px 40px}.cv-hero h1{font-size:clamp(50px,11vw,76px);letter-spacing:-3px}.cv-values-section{padding-left:20px;padding-right:20px}.cv-values-stage{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:30px 24px;padding:15px 0}.cv-world-dots,.cv-connector{display:none}.cv-values-word{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;grid-row:1;text-align:center;font-size:clamp(75px,17vw,130px);letter-spacing:-6px;margin:10px 0}.cv-value,.cv-value-1,.cv-value-2,.cv-value-3,.cv-value-4,.cv-value-5,.cv-value-6{position:relative;inset:auto;transform:none;width:100%}.cv-value-1{grid-column:1;grid-row:2}.cv-value-2{grid-column:2;grid-row:2}.cv-value-3{grid-column:1;grid-row:3}.cv-value-4{grid-column:2;grid-row:3}.cv-value-5{grid-column:1;grid-row:4}.cv-value-6{grid-column:2;grid-row:4}.cv-statement{width:calc(100% - 40px);padding:28px 25px}.cv-statement-mark{font-size:65px;width:70px}.cv-statement-line{margin:0 25px}.cv-statement-copy p{font-size:18px}.cv-stats{width:100%;grid-template-columns:repeat(2,1fr)}.cv-stat:nth-child(2){border-right:0}.cv-stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}} @media(max-width:600px){.cv-hero-content{padding:55px 20px 30px}.cv-eyebrow{font-size:9px;letter-spacing:3px}.cv-hero h1{font-size:48px;letter-spacing:-2px}.cv-hero-content>p{font-size:13px}.cv-hero-actions{flex-direction:column;align-items:stretch}.cv-btn{width:100%}.cv-hero-media{height:250px}.cv-section-heading{gap:10px}.cv-section-heading span{width:25px}.cv-section-heading p{font-size:9px;letter-spacing:2.5px;text-align:center}.cv-values-stage{grid-template-columns:1fr;gap:24px}.cv-values-word{grid-column:1;grid-row:1;font-size:76px;margin-bottom:12px}.cv-value-1,.cv-value-2,.cv-value-3,.cv-value-4,.cv-value-5,.cv-value-6{grid-column:1}.cv-value-1{grid-row:2}.cv-value-2{grid-row:3}.cv-value-3{grid-row:4}.cv-value-4{grid-row:5}.cv-value-5{grid-row:6}.cv-value-6{grid-row:7}.cv-value{max-width:430px;margin:auto}.cv-statement{width:calc(100% - 30px);display:block;padding:24px 20px}.cv-statement-mark{width:auto;text-align:left;font-size:60px;margin-bottom:5px}.cv-statement-line{width:45px;height:2px;margin:0 0 18px}.cv-statement-copy{display:block}.cv-quote-mark{display:none}.cv-statement-copy p{font-size:18px}.cv-stats{grid-template-columns:1fr}.cv-stat,.cv-stat:nth-child(2){border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.cv-stat:last-child{border-bottom:0}} /* ========================================================= HOLS-FIELD CORE VALUES ELECTRIC VALUES EFFECT Paste this at the VERY BOTTOM of core-values.css ========================================================= */ /* ========================================================= 1. SHARP VALUES WORDMARK ========================================================= */ .cv-values-word { color: transparent !important; /* Sharp orange outline */ -webkit-text-stroke: 2.5px #ff6a00; text-stroke: 2.5px #ff6a00; /* Controlled industrial glow */ text-shadow: 0 0 2px #ff6a00, 0 0 8px rgba(255, 106, 0, .75), 0 0 18px rgba(255, 106, 0, .35); filter: brightness(1.05); animation: valuesPowerPulse 3.8s ease-in-out infinite; z-index: 10; } /* Keep the word crisp most of the time */ @keyframes valuesPowerPulse { 0%, 72%, 100% { -webkit-text-stroke-color: #ff6a00; text-shadow: 0 0 2px #ff6a00, 0 0 8px rgba(255, 106, 0, .65), 0 0 18px rgba(255, 106, 0, .25); filter: brightness(1); } 74% { -webkit-text-stroke-color: #ffb15c; text-shadow: 0 0 3px #fff, 0 0 9px #ff6a00, 0 0 22px #ff6a00, 0 0 40px rgba(255, 106, 0, .55); filter: brightness(1.4); } 76% { filter: brightness(.95); } 78% { -webkit-text-stroke-color: #ff8a00; text-shadow: 0 0 3px #fff, 0 0 12px #ff6a00, 0 0 28px rgba(255, 106, 0, .6); filter: brightness(1.3); } 80% { filter: brightness(1); } } /* ========================================================= 2. ELECTRIC CONNECTOR BASE ========================================================= */ .cv-connector { position: absolute; background: linear-gradient( 90deg, rgba(255,106,0,.15), #ff6a00 25%, #ff8a00 50%, #ff6a00 75%, rgba(255,106,0,.15) ); box-shadow: 0 0 3px #ff6a00, 0 0 9px rgba(255,106,0,.45); overflow: visible; z-index: 8; } /* ========================================================= 3. MOVING ELECTRICAL CURRENT ========================================================= */ .cv-connector::before { content: ""; position: absolute; width: 55px; height: 4px; top: -1.5px; left: -60px; border-radius: 50%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.25), #fff, #ffb35c, #ff6a00, transparent ); box-shadow: 0 0 4px #fff, 0 0 9px #ff6a00, 0 0 18px rgba(255,106,0,.8); filter: blur(.15px); animation: electricalCurrent 2.2s linear infinite; } /* Moving bright point */ @keyframes electricalCurrent { 0% { left: -65px; opacity: 0; } 7% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% + 65px); opacity: 0; } } /* ========================================================= 4. ELECTRIC TERMINAL / SPARK ========================================================= */ .cv-connector::after { content: ""; position: absolute; width: 6px; height: 6px; top: -2.5px; border-radius: 50%; background: #ff9b32; box-shadow: 0 0 3px #fff, 0 0 8px #ff6a00, 0 0 18px #ff6a00, 0 0 30px rgba(255,106,0,.35); animation: terminalSpark 1.8s ease-in-out infinite; } @keyframes terminalSpark { 0%, 100% { opacity: .45; transform: scale(.75); } 40% { opacity: 1; transform: scale(1.15); } 48% { opacity: .4; transform: scale(.65); } 55% { opacity: 1; transform: scale(1.25); } 70% { opacity: .65; } } /* ========================================================= 5. ELECTRIC CRACKLE ABOVE THE LINES ========================================================= */ .cv-connector { isolation: isolate; } /* Small irregular-looking electrical wave. This creates the "crackling" appearance without an image. */ .cv-connector { --electric-wave: polygon( 0% 55%, 5% 45%, 9% 65%, 14% 30%, 18% 62%, 23% 40%, 28% 70%, 34% 32%, 39% 58%, 45% 25%, 50% 63%, 55% 38%, 61% 68%, 66% 30%, 71% 58%, 77% 35%, 82% 65%, 88% 40%, 93% 58%, 100% 45%, 100% 70%, 0% 70% ); } /* ========================================================= 6. STRONGER GLOW WHERE LINES MEET VALUES ========================================================= */ .cv-values-word { position: absolute; } /* Soft energy field behind VALUES */ .cv-values-stage::after { content: ""; position: absolute; width: 680px; height: 330px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient( ellipse at center, rgba(255,106,0,.12) 0%, rgba(255,106,0,.055) 28%, rgba(255,106,0,.018) 48%, transparent 72% ); filter: blur(8px); pointer-events: none; z-index: 1; animation: energyField 4s ease-in-out infinite; } @keyframes energyField { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: .9; transform: translate(-50%, -50%) scale(1.04); } } /* ========================================================= 7. ELECTRIC DOT FIELD ========================================================= */ .cv-world-dots { opacity: .20 !important; background-image: radial-gradient( circle, rgba(255,106,0,.8) 1px, transparent 1.5px ) !important; background-size: 9px 9px !important; animation: dotEnergy 5s ease-in-out infinite; } @keyframes dotEnergy { 0%, 100% { opacity: .10; } 50% { opacity: .27; } } /* ========================================================= 8. ICONS RECEIVE THE SAME ELECTRICAL ENERGY ========================================================= */ .cv-value-icon { border-color: #ff6a00 !important; color: #ff6a00 !important; box-shadow: 0 0 5px rgba(255,106,0,.25), inset 0 0 8px rgba(255,106,0,.04); animation: iconPower 3.6s ease-in-out infinite; } @keyframes iconPower { 0%, 82%, 100% { box-shadow: 0 0 5px rgba(255,106,0,.2), inset 0 0 8px rgba(255,106,0,.03); filter: brightness(1); } 85% { box-shadow: 0 0 5px #fff, 0 0 13px #ff6a00, 0 0 27px rgba(255,106,0,.55), inset 0 0 10px rgba(255,106,0,.15); filter: brightness(1.35); } 88% { box-shadow: 0 0 2px #ff6a00, 0 0 8px rgba(255,106,0,.25); filter: brightness(.95); } 91% { box-shadow: 0 0 6px #fff, 0 0 18px #ff6a00, 0 0 35px rgba(255,106,0,.65); filter: brightness(1.4); } } /* Stagger the electrical flashes */ .cv-value-1 .cv-value-icon { animation-delay: .1s; } .cv-value-2 .cv-value-icon { animation-delay: .65s; } .cv-value-3 .cv-value-icon { animation-delay: 1.2s; } .cv-value-4 .cv-value-icon { animation-delay: 1.7s; } .cv-value-5 .cv-value-icon { animation-delay: 2.2s; } .cv-value-6 .cv-value-icon { animation-delay: 2.7s; } /* ========================================================= 9. CONNECTOR TIMING ========================================================= */ .cv-connector-1::before { animation-delay: .1s; } .cv-connector-2::before { animation-delay: .65s; } .cv-connector-3::before { animation-delay: 1.15s; } .cv-connector-4::before { animation-delay: .4s; } .cv-connector-5::before { animation-delay: 1.5s; } .cv-connector-6::before { animation-delay: .85s; } /* ========================================================= 10. VERTICAL CONNECTORS ========================================================= */ .cv-connector-2, .cv-connector-5 { background: linear-gradient( 180deg, rgba(255,106,0,.12), #ff6a00 25%, #ff9b32 50%, #ff6a00 75%, rgba(255,106,0,.12) ); box-shadow: 0 0 4px #ff6a00, 0 0 12px rgba(255,106,0,.4); } .cv-connector-2::before, .cv-connector-5::before { width: 4px; height: 50px; top: -55px; left: -1px; background: linear-gradient( 180deg, transparent, rgba(255,255,255,.4), #fff, #ff9b32, #ff6a00, transparent ); box-shadow: 0 0 4px #fff, 0 0 10px #ff6a00, 0 0 20px rgba(255,106,0,.7); animation: electricalVerticalCurrent 2.5s linear infinite; } @keyframes electricalVerticalCurrent { 0% { top: -55px; opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% + 55px); opacity: 0; } } /* ========================================================= 11. RANDOMIZED ELECTRIC FLICKERS ========================================================= */ .cv-connector-1 { animation: lineFlicker 3.4s infinite; } .cv-connector-2 { animation: lineFlicker 4.1s infinite .7s; } .cv-connector-3 { animation: lineFlicker 3.7s infinite 1.2s; } .cv-connector-4 { animation: lineFlicker 4.4s infinite .3s; } .cv-connector-5 { animation: lineFlicker 3.9s infinite 1.6s; } .cv-connector-6 { animation: lineFlicker 4.2s infinite .9s; } @keyframes lineFlicker { 0%, 86%, 100% { opacity: .72; } 88% { opacity: 1; filter: brightness(1.7); } 89% { opacity: .45; } 90% { opacity: 1; filter: brightness(1.4); } 92% { opacity: .7; filter: brightness(1); } } /* ========================================================= 12. MAKE VALUES SIT ABOVE THE ENERGY ========================================================= */ .cv-values-word, .cv-value { z-index: 20; } .cv-world-dots { z-index: 2; } .cv-connector { z-index: 12; } /* ========================================================= 13. MOBILE — KEEP IT CLEAN ========================================================= */ @media (max-width: 850px) { /* Your existing mobile CSS hides the connectors. Keep that behaviour so the mobile version doesn't become visually overloaded. */ .cv-connector { display: none !important; } .cv-values-word { text-shadow: 0 0 3px #ff6a00, 0 0 10px rgba(255,106,0,.55), 0 0 20px rgba(255,106,0,.25); } .cv-values-stage::after { width: 90%; height: 230px; } } /* ========================================================= 14. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .cv-values-word, .cv-connector, .cv-connector::before, .cv-connector::after, .cv-value-icon, .cv-values-stage::after, .cv-world-dots { animation: none !important; } } /* ========================================================= CORE VALUES — INTERACTIVE EXPERIENCE ========================================================= */ /* --------------------------------------------------------- SCROLL REVEAL --------------------------------------------------------- */ .cv-value, .cv-statement, .cv-stat, .cv-hero-content, .cv-section-heading { opacity: 0; transform: translateY(25px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); } .cv-value.is-visible, .cv-statement.is-visible, .cv-stat.is-visible, .cv-hero-content.is-visible, .cv-section-heading.is-visible { opacity: 1; transform: translateY(0); } /* --------------------------------------------------------- STAGGER THE VALUES --------------------------------------------------------- */ .cv-value-1 { transition-delay: .05s; } .cv-value-2 { transition-delay: .15s; } .cv-value-3 { transition-delay: .25s; } .cv-value-4 { transition-delay: .35s; } .cv-value-5 { transition-delay: .45s; } .cv-value-6 { transition-delay: .55s; } /* --------------------------------------------------------- VALUE HOVER INTERACTION --------------------------------------------------------- */ .cv-value { cursor: pointer; transition: transform .35s ease, opacity .8s ease, filter .35s ease; } .cv-value:hover { filter: brightness(1.18); z-index: 40; } /* Don't break the existing transform positioning */ .cv-value-2:hover, .cv-value-5:hover { transform: translateX(-50%) translateY(-5px); } .cv-value-1:hover, .cv-value-3:hover, .cv-value-4:hover, .cv-value-6:hover { transform: translateY(-5px); } /* --------------------------------------------------------- VALUE ICON HOVER --------------------------------------------------------- */ .cv-value:hover .cv-value-icon { background: #ff6a00; color: #050505; border-color: #ff9b32; box-shadow: 0 0 5px #fff, 0 0 14px #ff6a00, 0 0 30px rgba(255,106,0,.65); transform: scale(1.08); transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease; } /* --------------------------------------------------------- VALUE TITLE HOVER --------------------------------------------------------- */ .cv-value:hover h2 { color: #ff6a00; text-shadow: 0 0 8px rgba(255,106,0,.35); transition: .25s ease; } /* --------------------------------------------------------- VALUE NUMBER --------------------------------------------------------- */ .cv-value small { transition: .25s ease; } .cv-value:hover small { text-shadow: 0 0 8px #ff6a00; letter-spacing: 2px; } /* --------------------------------------------------------- INTERACTIVE VALUES WORD --------------------------------------------------------- */ .cv-values-word { transition: transform .15s ease-out, text-shadow .3s ease, filter .3s ease; } /* Cursor-active state */ .cv-values-stage.is-active .cv-values-word { text-shadow: 0 0 3px #ff6a00, 0 0 10px #ff6a00, 0 0 25px rgba(255,106,0,.65), 0 0 50px rgba(255,106,0,.25); filter: brightness(1.15); } /* --------------------------------------------------------- MOUSE LIGHT --------------------------------------------------------- */ .cv-values-stage::before { content: ""; position: absolute; width: 280px; height: 280px; left: var(--mouse-x, 50%); top: var(--mouse-y, 50%); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(255,106,0,.13) 0%, rgba(255,106,0,.045) 30%, transparent 70% ); pointer-events: none; z-index: 3; opacity: 0; transition: opacity .4s ease; } .cv-values-stage.is-active::before { opacity: 1; } /* --------------------------------------------------------- ELECTRIC LINES BECOME STRONGER WHEN A VALUE IS HOVERED --------------------------------------------------------- */ .cv-values-stage.value-hovered .cv-connector { opacity: .28; transition: opacity .3s ease; } /* JavaScript adds these classes */ .cv-values-stage.hover-value-1 .cv-connector-1, .cv-values-stage.hover-value-2 .cv-connector-2, .cv-values-stage.hover-value-3 .cv-connector-3, .cv-values-stage.hover-value-4 .cv-connector-4, .cv-values-stage.hover-value-5 .cv-connector-5, .cv-values-stage.hover-value-6 .cv-connector-6 { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 6px #ff6a00); transform-origin: center; animation: activeElectricalLine .8s ease-in-out infinite; } @keyframes activeElectricalLine { 0%, 100% { filter: brightness(1) drop-shadow(0 0 3px #ff6a00); } 50% { filter: brightness(2) drop-shadow(0 0 10px #ff6a00); } } /* --------------------------------------------------------- HERO IMAGE PARALLAX --------------------------------------------------------- */ .cv-hero-media img { transition: transform .25s ease-out; will-change: transform; } /* --------------------------------------------------------- HERO BUTTON INTERACTION --------------------------------------------------------- */ .cv-btn { position: relative; overflow: hidden; } .cv-btn::after { content: ""; position: absolute; width: 0; height: 100%; left: 50%; top: 0; background: rgba(255,255,255,.13); transform: translateX(-50%); transition: width .35s ease; pointer-events: none; } .cv-btn:hover::after { width: 120%; } /* --------------------------------------------------------- STAT HOVER --------------------------------------------------------- */ .cv-stat { position: relative; transition: background .3s ease, transform .3s ease; } .cv-stat:hover { background: linear-gradient( 90deg, rgba(255,106,0,.06), transparent ); transform: translateY(-3px); } .cv-stat:hover > i { filter: drop-shadow(0 0 7px #ff6a00); transform: scale(1.12); } .cv-stat > i { transition: .3s ease; } /* --------------------------------------------------------- STAT NUMBER --------------------------------------------------------- */ .cv-stat strong { transition: color .3s ease; } .cv-stat:hover strong { color: #ff6a00; } /* --------------------------------------------------------- STAT REVEAL --------------------------------------------------------- */ .cv-stat:nth-child(1) { transition-delay: .05s; } .cv-stat:nth-child(2) { transition-delay: .15s; } .cv-stat:nth-child(3) { transition-delay: .25s; } .cv-stat:nth-child(4) { transition-delay: .35s; } /* --------------------------------------------------------- STAT FLASH AFTER COUNT --------------------------------------------------------- */ .cv-stat.counted strong { animation: statFlash .65s ease; } @keyframes statFlash { 0% { color: #fff; text-shadow: none; } 45% { color: #ff6a00; text-shadow: 0 0 10px rgba(255,106,0,.55); } 100% { color: #fff; text-shadow: none; } } /* --------------------------------------------------------- STATEMENT INTERACTION --------------------------------------------------------- */ .cv-statement { transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease, opacity .8s ease; } .cv-statement:hover { transform: translateY(-4px); border-color: rgba(255,106,0,.45); box-shadow: 0 15px 45px rgba(0,0,0,.5), 0 0 30px rgba(255,106,0,.05); } .cv-statement-mark { transition: transform .4s ease, text-shadow .4s ease; } .cv-statement:hover .cv-statement-mark { transform: scale(1.08); text-shadow: 0 0 12px rgba(255,106,0,.55); } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 850px) { .cv-values-stage::before { display: none; } .cv-value:hover, .cv-value-2:hover, .cv-value-5:hover { transform: none; } .cv-value:hover .cv-value-icon { transform: scale(1.03); } .cv-stat:hover { transform: none; } } /* --------------------------------------------------------- REDUCED MOTION --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cv-value, .cv-statement, .cv-stat, .cv-hero-content, .cv-section-heading { opacity: 1; transform: none; transition: none; } .cv-hero-media img, .cv-values-word { transform: none !important; } } /* ========================================================= VALUES PROMISE — ORANGE FEATURE BOX ========================================================= */ .cv-statement { background: #ff6a00 !important; border: none !important; border-bottom: none !important; color: #050505; box-shadow: 0 15px 45px rgba(0, 0, 0, .45); position: relative; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; } /* Subtle architectural circle */ .cv-statement::after { content: ""; position: absolute; width: 520px; height: 520px; right: -230px; top: 50%; transform: translateY(-50%); border: 1px solid rgba(0, 0, 0, .18); border-radius: 50%; box-shadow: 0 0 0 35px rgba(0, 0, 0, .035), 0 0 0 70px rgba(0, 0, 0, .025), 0 0 0 105px rgba(0, 0, 0, .018); pointer-events: none; } /* H logo */ .cv-statement-mark { color: #050505 !important; text-shadow: none !important; position: relative; z-index: 2; } /* Vertical divider */ .cv-statement-line { background: rgba(0, 0, 0, .35) !important; position: relative; z-index: 2; } /* Quote area */ .cv-statement-copy { position: relative; z-index: 3; } /* Quote marks */ .cv-quote-mark { color: #050505 !important; text-shadow: none !important; } /* Main statement */ .cv-statement-copy p { color: #050505 !important; font-weight: 700; text-shadow: none; } /* Orange text becomes black on orange */ .cv-statement-copy strong { color: #050505 !important; font-weight: 900; } /* Hover */ .cv-statement:hover { transform: translateY(-4px); box-shadow: 0 20px 55px rgba(0, 0, 0, .55), 0 0 25px rgba(255, 106, 0, .12); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .cv-statement { padding: 25px 20px; } .cv-statement::after { width: 350px; height: 350px; right: -190px; } .cv-statement-mark { color: #050505 !important; } .cv-statement-copy p { color: #050505 !important; } } /* ========================================================= CORE VALUES — ORANGE STATS STRIP ========================================================= */ .cv-stats-section { background: #ff6a00 !important; border-top: none !important; border-bottom: none !important; } .cv-stats { background: transparent; } /* Individual stat boxes */ .cv-stat { background: transparent !important; border-right: 1px solid rgba(0, 0, 0, .28) !important; color: #050505; transition: background .3s ease, transform .3s ease; } .cv-stat:last-child { border-right: none !important; } /* Icons */ .cv-stat > i { color: #050505 !important; filter: none !important; } /* Numbers */ .cv-stat strong { color: #050505 !important; text-shadow: none !important; } /* Labels */ .cv-stat span { color: rgba(0, 0, 0, .65) !important; } /* Hover */ .cv-stat:hover { background: rgba(0, 0, 0, .08) !important; transform: translateY(-2px); } .cv-stat:hover > i { color: #050505 !important; filter: none !important; } .cv-stat:hover strong { color: #050505 !important; } /* ========================================================= COUNT-UP FLASH — KEEP IT BLACK ON ORANGE ========================================================= */ .cv-stat.counted strong { animation: orangeStatFlash .65s ease; } @keyframes orangeStatFlash { 0% { color: #050505; text-shadow: none; } 45% { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.5); } 100% { color: #050505; text-shadow: none; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 850px) { .cv-stat, .cv-stat:nth-child(2) { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,.25) !important; } .cv-stat:last-child { border-bottom: none !important; } } /* ========================================================= CORE VALUES — ICONS FOR ALL SIX VALUES ========================================================= */ .cv-value-icon { position: relative; flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid #ff6a00; border-radius: 50%; background: #050505; color: #ff6a00; font-size: 18px; box-shadow: 0 0 6px rgba(255, 106, 0, .25), inset 0 0 10px rgba(255, 106, 0, .05); transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; } /* Icon itself */ .cv-value-icon i { display: block; line-height: 1; } /* ========================================================= INDIVIDUAL VALUE ICONS ========================================================= */ /* 01 — Integrity */ .cv-value-1 .cv-value-icon { color: #ff6a00; } /* 02 — Innovation */ .cv-value-2 .cv-value-icon { color: #ff6a00; } /* 03 — Professionalism */ .cv-value-3 .cv-value-icon { color: #ff6a00; } /* 04 — Customer Focus */ .cv-value-4 .cv-value-icon { color: #ff6a00; } /* 05 — Reliability */ .cv-value-5 .cv-value-icon { color: #ff6a00; } /* 06 — Sustainability */ .cv-value-6 .cv-value-icon { color: #ff6a00; } /* ========================================================= ICON HOVER ========================================================= */ .cv-value:hover .cv-value-icon { background: #ff6a00; color: #050505; transform: scale(1.1); border-color: #ff9b32; box-shadow: 0 0 5px #fff, 0 0 14px #ff6a00, 0 0 30px rgba(255, 106, 0, .6); } /* ========================================================= ICON GLOW ========================================================= */ .cv-value-icon::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(255, 106, 0, .15); border-radius: 50%; opacity: .6; pointer-events: none; } /* ========================================================= MAKE THE ICONS STAND OUT ON DESKTOP ========================================================= */ @media (min-width: 851px) { .cv-value-icon { width: 50px; height: 50px; flex-basis: 50px; font-size: 19px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .cv-value-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 16px; } } /* ========================================================= CORE VALUE ICONS — FINAL SIZE ========================================================= */ .cv-value-icon { width: 52px !important; height: 52px !important; flex: 0 0 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1.5px solid #ff6a00 !important; border-radius: 50% !important; background: #050505 !important; color: #ff6a00 !important; font-size: 20px !important; box-shadow: 0 0 6px rgba(255,106,0,.25), 0 0 15px rgba(255,106,0,.08) !important; } .cv-value-icon i { display: block !important; color: #ff6a00 !important; font-size: 20px !important; line-height: 1 !important; } .cv-value:hover .cv-value-icon { background: #ff6a00 !important; color: #000 !important; box-shadow: 0 0 6px #fff, 0 0 15px #ff6a00, 0 0 30px rgba(255,106,0,.65) !important; } .cv-value:hover .cv-value-icon i { color: #000 !important; } /* ========================================================= HOLS-FIELD CORE VALUES — FINAL POLISH Paste at the VERY BOTTOM of core-values.css ========================================================= */ /* ========================================================= 1. MOBILE + TABLET RESPONSIVENESS ========================================================= */ /* ---------- TABLET ---------- */ @media (max-width: 1100px) { .cv-values-stage { width: 94%; } .cv-value { max-width: 260px; } .cv-value h2 { font-size: 16px; } .cv-value p { font-size: 11px; line-height: 1.5; } .cv-values-word { font-size: clamp(100px, 15vw, 190px); } .cv-statement { width: 90%; } } /* ---------- SMALL TABLET ---------- */ @media (max-width: 850px) { /* HERO */ .cv-hero { min-height: auto; } .cv-hero-content { padding: 70px 30px 55px; } .cv-hero-title { font-size: clamp(48px, 9vw, 82px); line-height: .92; } .cv-hero-description { max-width: 600px; } /* HERO IMAGE */ .cv-hero-media { min-height: 360px; height: 360px; } .cv-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* VALUES */ .cv-values-stage { min-height: 700px; width: 100%; } /* Hide the connector lines on smaller screens. The six values become easier to read. */ .cv-connector { display: none !important; } .cv-world-dots { opacity: .10 !important; } .cv-values-word { font-size: clamp(85px, 17vw, 150px); } /* VALUE ITEMS */ .cv-value { max-width: 220px; } .cv-value h2 { font-size: 15px; } .cv-value p { font-size: 10px; } /* PROMISE */ .cv-statement { width: calc(100% - 40px); margin: 0 auto; } /* STATS */ .cv-stats { grid-template-columns: repeat(2, 1fr); } .cv-stat { min-height: 100px; } } /* ---------- MOBILE ---------- */ @media (max-width: 600px) { /* HERO */ .cv-hero { display: flex; flex-direction: column; } .cv-hero-content { padding: 45px 20px 35px; } .cv-hero-title { font-size: clamp(43px, 13vw, 70px); line-height: .94; } .cv-hero-description { font-size: 13px; line-height: 1.7; } .cv-hero-buttons { flex-wrap: wrap; gap: 10px; } /* HERO IMAGE */ .cv-hero-media { height: 280px; min-height: 280px; } .cv-hero-media img { object-fit: cover; /* Keeps the industrial refinery visible instead of cutting too much from the sides. */ object-position: center center; } /* VALUES SECTION */ .cv-values-section { padding-top: 65px; padding-bottom: 50px; } .cv-section-heading { margin-bottom: 35px; } /* VALUE STAGE */ .cv-values-stage { min-height: auto; display: grid; grid-template-columns: 1fr; gap: 22px; padding: 15px 20px 25px; } /* BIG VALUES WORD */ .cv-values-word { position: relative !important; left: auto !important; top: auto !important; transform: none !important; text-align: center; font-size: clamp(65px, 20vw, 105px); line-height: .9; order: -1; margin: 15px 0 20px; } /* VALUES */ .cv-value, .cv-value-2, .cv-value-5 { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; width: 100%; max-width: none; display: flex; align-items: center; gap: 14px; text-align: left; } /* VALUE ICON */ .cv-value-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; font-size: 17px !important; } /* VALUE CONTENT */ .cv-value-content { flex: 1; } .cv-value h2 { font-size: 15px; margin-bottom: 4px; } .cv-value p { font-size: 11px; line-height: 1.5; max-width: 420px; } /* PROMISE BOX */ .cv-statement { width: calc(100% - 30px); padding: 25px 20px; margin: 0 auto; display: flex; align-items: flex-start; gap: 15px; } .cv-statement-mark { font-size: 50px; flex: 0 0 auto; } .cv-statement-copy p { font-size: 16px; line-height: 1.35; } /* STATS */ .cv-stats { grid-template-columns: 1fr; } .cv-stat { min-height: 85px; border-right: none !important; border-bottom: 1px solid rgba(0,0,0,.22) !important; } .cv-stat:last-child { border-bottom: none !important; } } /* ========================================================= 2. HERO IMAGE — BETTER CROPPING ========================================================= */ .cv-hero-media { overflow: hidden; } .cv-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform .8s cubic-bezier(.2,.7,.2,1); } /* Desktop — show more of the industrial environment */ @media (min-width: 1101px) { .cv-hero-media img { object-position: center 45%; } } /* Tablet */ @media (max-width: 1100px) and (min-width: 601px) { .cv-hero-media img { object-position: 55% center; } } /* Mobile */ @media (max-width: 600px) { .cv-hero-media img { object-position: 58% center; } } /* ========================================================= 3. REFINED ELECTRIC EFFECT ========================================================= */ /* Tone down the glow so the electricity looks premium. */ .cv-connector { box-shadow: 0 0 2px rgba(255,106,0,.7), 0 0 7px rgba(255,106,0,.22) !important; } /* Moving pulse */ .cv-connector::before { width: 42px !important; height: 2px !important; opacity: .75; filter: blur(.15px) drop-shadow(0 0 3px #ff6a00) !important; } /* Terminal spark */ .cv-connector::after { width: 5px !important; height: 5px !important; box-shadow: 0 0 3px #fff, 0 0 7px #ff6a00, 0 0 13px rgba(255,106,0,.45) !important; } /* VALUES glow — sharper, less hazy */ .cv-values-word { text-shadow: 0 0 2px #ff6a00, 0 0 7px rgba(255,106,0,.55), 0 0 15px rgba(255,106,0,.18) !important; } /* Don't over-glow the dot field */ .cv-world-dots { opacity: .12 !important; } /* ========================================================= 4. SPACING CONSISTENCY ========================================================= */ /* Hero → Values */ .cv-values-section { padding-top: clamp(60px, 7vw, 95px); } /* Values → Statement */ .cv-statement { margin-top: clamp(40px, 5vw, 70px); margin-bottom: 0; } /* Statement → Stats */ .cv-stats-section { margin-top: 20px; } /* Keep everything aligned to the same visual width */ .cv-statement, .cv-stats { width: min(90%, 1100px); margin-left: auto; margin-right: auto; } /* Prevent the values area from becoming excessively tall */ @media (min-width: 851px) { .cv-values-stage { min-height: 600px; } } /* ========================================================= 5. PREMIUM HOVER STATES ========================================================= */ /* Buttons */ .cv-btn { transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; } .cv-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,106,0,.18); } /* Orange primary button */ .cv-btn-primary:hover { background: #ff7a19 !important; box-shadow: 0 8px 25px rgba(255,106,0,.28); } /* Outline button */ .cv-btn-outline:hover { border-color: #ff6a00 !important; color: #ff6a00 !important; } /* Value hover */ .cv-value { transition: transform .3s ease, filter .3s ease; } .cv-value:hover { filter: brightness(1.08); z-index: 30; } /* Icon */ .cv-value-icon { transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease; } .cv-value:hover .cv-value-icon { transform: scale(1.08); background: #ff6a00 !important; color: #050505 !important; box-shadow: 0 0 5px rgba(255,255,255,.7), 0 0 12px #ff6a00, 0 0 24px rgba(255,106,0,.45); } /* Value title */ .cv-value h2 { transition: color .25s ease, letter-spacing .25s ease; } .cv-value:hover h2 { color: #ff6a00; letter-spacing: .3px; } /* Statement box */ .cv-statement { transition: transform .35s ease, box-shadow .35s ease; } .cv-statement:hover { transform: translateY(-3px); box-shadow: 0 18px 45px rgba(0,0,0,.35); } /* Stats */ .cv-stat { transition: background .3s ease, transform .3s ease; } .cv-stat:hover { background: rgba(0,0,0,.07) !important; transform: translateY(-2px); } /* Stat number */ .cv-stat strong { transition: color .25s ease, text-shadow .25s ease; } .cv-stat:hover strong { color: #050505 !important; text-shadow: 0 0 7px rgba(255,255,255,.35); } /* ========================================================= FINAL MOBILE SAFETY ========================================================= */ @media (max-width: 480px) { .cv-hero-title { font-size: 42px; } .cv-hero-description { font-size: 12px; } .cv-values-word { font-size: 68px; } .cv-value h2 { font-size: 14px; } .cv-value p { font-size: 10px; } .cv-statement-copy p { font-size: 14px; } .cv-statement-mark { font-size: 42px; } } /* ========================================================= HERO IMAGE — KEEP IT BELOW THE NAVBAR ========================================================= */ .cv-hero-media { overflow: hidden !important; } .cv-hero-media img { transform-origin: center center !important; } /* ========================================================= STOP HERO IMAGE FROM GOING BEHIND THE NAVBAR ========================================================= */ .cv-hero { margin-top: 116px; } .cv-hero-media { top: 0; } /* ========================================================= HOLS-FIELD — STANDARD NAVBAR CORE VALUES PAGE Matches the refined COMPLIANCE navbar ========================================================= */ /* Main navbar shell */ .site-header { position: relative; z-index: 1000; } .nav-shell { min-height: 72px; padding: 0 18px 0 24px; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(5,5,5,.92); box-shadow: 0 10px 35px rgba(0,0,0,.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ========================================================= BRAND ========================================================= */ .brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; text-decoration: none; } .brand-dots { width: 38px; height: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .brand-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #ff7800; } .brand-name { position: relative; display: flex; align-items: baseline; gap: 0; color: #f5f5f5; font-size: 20px; font-weight: 700; letter-spacing: -.04em; } .brand-name b { color: #ff7800; font-weight: 800; } .brand-name small { position: absolute; left: 1px; bottom: -11px; color: rgba(255,255,255,.42); font-size: 6px; font-weight: 700; letter-spacing: .18em; } /* ========================================================= NAVIGATION ========================================================= */ .main-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0; margin-left: 55px; } .main-nav a { position: relative; display: flex; align-items: center; height: 72px; padding: 0 17px; color: rgba(255,255,255,.72); font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .01em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color .25s ease, background .25s ease; } /* subtle hover */ .main-nav a:hover { color: #fff; } /* Active page */ .main-nav a.active { color: #ff7800; background: linear-gradient( 180deg, rgba(255,120,0,.08), rgba(255,120,0,.025) ); } /* Active orange underline */ .main-nav a.active::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 30px; height: 3px; transform: translateX(-50%); border-radius: 4px 4px 0 0; background: #ff7800; box-shadow: 0 0 12px rgba(255,120,0,.45); } /* ========================================================= GET IN TOUCH ========================================================= */ .header-cta { flex-shrink: 0; min-width: 176px; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 0 22px; border-radius: 12px; background: #ff7800; color: #050505; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; box-shadow: 0 8px 25px rgba(255,120,0,.18); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .header-cta:hover { background: #ff851a; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,120,0,.28); } .header-cta i { font-size: 12px; transition: transform .25s ease; } .header-cta:hover i { transform: translateX(4px); } /* ========================================================= MOBILE BUTTON ========================================================= */ .menu-toggle { display: none; width: 42px; height: 42px; margin-left: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #0b0b0b; cursor: pointer; } .menu-toggle i { display: block; width: 18px; height: 2px; margin: 4px auto; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) { .main-nav { margin-left: 25px; } .main-nav a { padding: 0 11px; font-size: 10px; } .header-cta { min-width: 145px; height: 48px; font-size: 10px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 900px) { .nav-shell { min-height: 64px; padding: 0 14px 0 16px; border-radius: 15px; } .brand-dots { width: 32px; height: 32px; gap: 3px; } .brand-dots i { width: 6px; height: 6px; } .brand-name { font-size: 17px; } .brand-name small { font-size: 5px; bottom: -9px; } .main-nav { display: none; } .header-cta { display: none; } .menu-toggle { display: block; } } /* ========================================================= FINAL SITE NAVBAR — COMPLIANCE STANDARD Core Values page Keep this block at the VERY BOTTOM of core-values.css ========================================================= */ .site-header { position: relative; z-index: 9999; padding: 18px 3%; background: transparent; } .nav-shell { width: 100%; min-height: 74px; padding: 0 12px 0 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(7,7,7,.88); box-shadow: 0 8px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .brand { min-width: 245px; gap: 12px; } .brand-dots { width: 38px; height: 38px; gap: 4px; } .brand-dots i { width: 7px; height: 7px; } .brand-name { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 700; } .main-nav { margin-left: 0; gap: 0; justify-content: center; } .main-nav a { height: 74px; padding: 0 15px; color: rgba(255,255,255,.72); font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .01em; } .main-nav a:hover { color: #fff; background: rgba(255,255,255,.025); } .main-nav a.active { color: #ff7800; background: linear-gradient( 180deg, rgba(255,120,0,.075), rgba(255,120,0,.018) ); } .main-nav a.active::after { width: 30px; height: 3px; background: #ff7800; box-shadow: 0 0 12px rgba(255,120,0,.45); } .header-cta { min-width: 176px; height: 52px; border-radius: 12px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .01em; } /* Keep the hero from crowding the floating navbar. */ .cv-hero { margin-top: 0 !important; } /* ========================================================= TABLET NAVBAR ========================================================= */ @media (max-width: 1250px) { .site-header { padding: 14px 2.5%; } .brand { min-width: 205px; } .main-nav a { padding: 0 10px; font-size: 10px; } .header-cta { min-width: 150px; height: 48px; font-size: 9px; } } /* ========================================================= MOBILE NAVBAR ========================================================= */ @media (max-width: 900px) { .site-header { padding: 10px 14px; } .nav-shell { min-height: 62px; padding: 0 12px 0 14px; border-radius: 16px; } .brand { min-width: 0; gap: 9px; } .brand-dots { width: 31px; height: 31px; gap: 3px; } .brand-dots i { width: 6px; height: 6px; } .brand-name { font-size: 17px; } .brand-name small { font-size: 5px; bottom: -9px; } .header-cta { display: none; } .menu-toggle { display: block; margin-left: auto; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #0b0b0b; } .menu-toggle.active i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-toggle.active i:nth-child(2) { opacity: 0; } .menu-toggle.active i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .main-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 8px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(5,5,5,.97); box-shadow: 0 18px 45px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; } .main-nav.mobile-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .main-nav a { width: 100%; height: 46px; padding: 0 16px; justify-content: flex-start; border-radius: 8px; font-size: 10px; } .main-nav a.active::after { left: 0; bottom: 8px; width: 3px; height: 30px; transform: none; border-radius: 0 3px 3px 0; } } @media (max-width: 480px) { .site-header { padding: 8px 10px; } .nav-shell { min-height: 58px; border-radius: 14px; } .brand-name { font-size: 16px; } .menu-toggle { width: 40px; height: 40px; } } /* ========================================================= HOLS-FIELD — CORE VALUES NAVBAR EXACT COMPLIANCE NAVBAR STANDARD ========================================================= */ .site-header { position: relative; z-index: 9999; padding: 14px 18px 0; background: transparent; } .nav-shell { width: 100%; max-width: 1400px; min-height: 62px; margin: 0 auto; padding: 0 12px 0 20px; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: linear-gradient( 120deg, rgba(8,8,8,.98), rgba(2,2,2,.96) ); box-shadow: 0 15px 50px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ========================= BRAND ========================= */ .brand { min-width: 190px; display: flex; align-items: center; gap: 13px; } .brand-dots { width: 28px; height: auto; display: grid; grid-template-columns: repeat(3, 6px); gap: 4px; } .brand-dots i { width: 6px; height: 6px; border-radius: 50%; background: #ff7800; box-shadow: 0 0 8px rgba(255,120,0,.25); } .brand-name { position: relative; font-family: "Inter", sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.7px; white-space: nowrap; } .brand-name b { color: #ff7800; } .brand-name small { position: absolute; left: 0; bottom: -10px; font-size: 6px; letter-spacing: 2px; color: #777; } /* ========================= NAVIGATION ========================= */ .main-nav { display: flex; align-items: stretch; justify-content: center; flex: 1; height: 62px; margin-left: 0; gap: 0; } .main-nav a { position: relative; display: flex; align-items: center; height: 62px; padding: 0 14px; color: #bcbcbc; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700; white-space: nowrap; transition: color .25s ease, background .25s ease; } .main-nav a::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; transform: translateX(-50%); background: #ff7800; border-radius: 3px 3px 0 0; transition: width .25s ease; } .main-nav a:hover { color: #fff; background: rgba(255,120,0,.035); } .main-nav a:hover::after, .main-nav a.active::after { width: 28px; } .main-nav a.active { color: #ff7800; background: linear-gradient( 180deg, rgba(255,120,0,.07), rgba(255,120,0,.015) ); } /* ========================= GET IN TOUCH ========================= */ .header-cta { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-width: 150px; height: 46px; padding: 0 20px; border-radius: 11px; background: #ff7800; color: #050505; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; box-shadow: 0 8px 25px rgba(255,120,0,.16); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .header-cta:hover { background: #ff8b1a; transform: translateY(-2px); box-shadow: 0 12px 35px rgba(255,120,0,.28); } .header-cta i { transition: transform .25s ease; } .header-cta:hover i { transform: translateX(4px); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .nav-shell { padding-left: 14px; } .brand { min-width: 165px; } .main-nav a { padding: 0 9px; font-size: 9px; } .header-cta { min-width: 125px; padding: 0 12px; font-size: 8px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 850px) { .site-header { padding: 10px 12px 0; } .nav-shell { min-height: 60px; padding: 0 14px; border-radius: 16px; } .brand { min-width: auto; } .brand-name { font-size: 16px; } .header-cta { display: none; } .menu-toggle { display: flex; margin-left: auto; margin-right: 10px; width: 38px; height: 38px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: #080808; cursor: pointer; } .menu-toggle i { width: 17px; height: 2px; background: #ff7800; } .main-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; height: auto; display: none; flex-direction: column; background: #070707; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.7); } .main-nav.mobile-open { display: flex; } .main-nav a { width: 100%; height: 46px; padding: 0 16px; justify-content: flex-start; border-radius: 8px; font-size: 10px; } .main-nav a.active::after { left: 0; bottom: 8px; width: 3px; height: 30px; transform: none; border-radius: 0 3px 3px 0; } } @media (max-width: 480px) { .site-header { padding: 8px 10px; } .nav-shell { min-height: 58px; border-radius: 14px; } .brand-name { font-size: 16px; } .menu-toggle { width: 40px; height: 40px; } }