/* ========================================================= NEVES SOUTH AFRICA Custom layer on top of Bootstrap 5.3. Loaded AFTER bootstrap.min.css so it wins on conflicts. Palette: black / white / paper / one orange. Nothing else. ========================================================= */ :root{ --ink:#0E0E0E; --white:#FFFFFF; --paper:#EDEBE6; --accent:#FF4A17; --pad:40px; --rule:1.5px solid var(--ink); --nav-h:80px; /* Bootstrap overrides */ --bs-body-font-family:'Switzer',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --bs-body-color:#0E0E0E; --bs-body-bg:#EDEBE6; --bs-border-radius:0; --bs-link-color:#0E0E0E; --bs-link-hover-color:#FF4A17; } /* kill Bootstrap's rounded corners everywhere, this design has none */ .btn,.form-control,.form-select,.card,.alert,.dropdown-menu{border-radius:0 !important;} /* overflow-x must NOT sit on : Bootstrap Scrollspy then treats body as the scroll container and the active highlighting stops updating. Keep it on . */ html{overflow-x:hidden;} body{ background:var(--paper); color:var(--ink); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } body:focus{outline:none;} /* tabindex=0 needed by scrollspy */ img{max-width:100%;} /* logos need explicit sizing: a bare height:auto lets them balloon inside flex containers */ .nv .navbar-brand img{height:26px;width:auto;display:block;} .site-footer img{height:20px;width:auto;display:block;} h1,h2,h3{margin:0;} p{margin:0 0 20px;} .svg-defs{position:absolute;width:0;height:0;overflow:hidden;} .display-x{ font-family:'Clash Display',sans-serif; font-weight:700;text-transform:uppercase;letter-spacing:-.02em;line-height:.88; } .display-med{ font-family:'Clash Display',sans-serif; font-weight:600;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05; } .accent{color:var(--accent);} .outline{color:transparent;-webkit-text-stroke:2px var(--ink);} .skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:2000;} .skip-link:focus{left:8px;top:8px;} /* ---------- grain ---------- */ .grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;opacity:.26;mix-blend-mode:multiply;} .grain-light{mix-blend-mode:screen;opacity:.15;} /* ---------- pattern vocabulary ---------- */ .p-swell{background:repeating-radial-gradient(circle at 100% 0%,currentColor 0 2px,transparent 2px 9px);} .p-check{background:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%);background-size:30px 30px;} .p-check-s{background:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%);background-size:18px 18px;} .p-halftone{background-image:radial-gradient(currentColor 34%,transparent 36%);background-size:14px 14px;} .p-vlines{background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 10px);} .p-hlines{background:repeating-linear-gradient(0deg,currentColor 0 3px,transparent 3px 10px);} .p-burst{background:repeating-conic-gradient(from 0deg,currentColor 0deg 4deg,transparent 4deg 9deg);border-radius:50%;} .k{color:var(--ink);} .o{color:var(--accent);} .w{color:var(--white);} .fill-k{background:var(--ink);} .fill-o{background:var(--accent);} .cres{display:block;width:100%;height:100%;position:relative;border-radius:50%;overflow:hidden;} .cres::after{content:"";position:absolute;inset:0;border-radius:50%;transform:translateX(34%);} .cres-k{background:var(--ink);} .cres-k::after{background:var(--paper);} .cres-dark{background:var(--accent);} .cres-dark::after{background:var(--ink);} .ast{font-family:'Clash Display',sans-serif;font-weight:700;color:var(--accent);line-height:1;} .ast-big{font-size:38px;} /* ---------- buttons ---------- */ .btn{ padding:18px 34px;font-weight:700;font-size:13px;letter-spacing:.14em; text-transform:uppercase;border:1.5px solid transparent; transition:background .18s ease,color .18s ease,border-color .18s ease; } .btn:focus,.btn:focus-visible{box-shadow:none;outline:3px solid var(--accent);outline-offset:3px;} .btn-accent{background:var(--accent);color:var(--ink);} .btn-accent:hover,.btn-accent:focus{background:var(--ink);color:var(--white);} .btn-outline-ink{border-color:var(--ink);background:var(--paper);color:var(--ink);} .btn-outline-ink:hover,.btn-outline-ink:focus{background:var(--ink);color:var(--white);} .tag{ display:inline-block;border:1.5px solid currentColor;padding:7px 14px; font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:700; } .tag-accent{color:var(--accent);} a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px;} /* ---------- scroll reveal ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;} .reveal.in{opacity:1;transform:none;} .reveal[data-delay="1"]{transition-delay:.09s;} .reveal[data-delay="2"]{transition-delay:.18s;} .reveal[data-delay="3"]{transition-delay:.27s;} .reveal[data-delay="4"]{transition-delay:.36s;} /* ========================================================= NAVBAR — sticky, always visible, Scrollspy highlighting ========================================================= */ .nv{ background:var(--paper); border-bottom:var(--rule); height:var(--nav-h); padding:0; z-index:1030; } .nv > .container-fluid{height:100%;} .nv .navbar-brand{padding:0;margin:0;} .nv .navbar-nav{gap:38px;} .nv .nav-link{ font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600; color:var(--ink);padding:4px 0;position:relative; } .nv .nav-link::after{ content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0; background:var(--accent);transition:width .22s ease; } .nv .nav-link:hover::after, .nv .nav-link:focus::after, .nv .nav-link.active::after{width:100%;} .nv .nav-link.active{color:var(--accent);} .nv-cta{ background:var(--ink);color:var(--white);padding:11px 20px; font-size:11px;letter-spacing:.16em; } .nv-cta:hover{background:var(--accent);color:var(--ink);} .nv-burger{display:block;width:24px;} .nv-burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.25s;} .navbar-toggler[aria-expanded="true"] .nv-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);} .navbar-toggler[aria-expanded="true"] .nv-burger span:nth-child(2){opacity:0;} .navbar-toggler[aria-expanded="true"] .nv-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* offset anchor targets so the sticky bar never covers a heading */ section[id]{scroll-margin-top:var(--nav-h);} /* ========================================================= HERO ========================================================= */ .hero{position:relative;background:var(--paper);overflow:hidden;} .hero-row{min-height:560px;} .hero-type{ padding:56px var(--pad); border-right:var(--rule); background:var(--paper); position:relative;z-index:4; display:flex;flex-direction:column;justify-content:center; } .hero-type h1{font-size:clamp(38px,4.6vw,74px);max-width:660px;} .hero-sub{margin-top:34px;max-width:430px;font-size:15.5px;} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;} .hero-field{position:relative;} .pattern-grid{ display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr); height:100%;min-height:560px; } .pattern-grid--sm{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);min-height:220px;height:220px;} .pg-cell{ border-right:1px solid rgba(14,14,14,.14); border-bottom:1px solid rgba(14,14,14,.14); position:relative;overflow:hidden; } .pg-cell svg{width:100%;height:100%;display:block;} .pg-cell .cres{margin:14%;width:72%;height:72%;} .pattern-grid .p-burst{transform:scale(.8);} .hero-meta{ position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between; gap:16px;min-height:44px;padding:10px var(--pad);flex-wrap:wrap; border-top:var(--rule);border-bottom:var(--rule);background:var(--paper); font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600; } .hero-band{ position:relative;z-index:4;background:var(--ink);color:var(--white); display:flex;align-items:center;justify-content:space-between;gap:24px; padding:34px var(--pad); } .hero-band-title{font-size:clamp(56px,10vw,150px);line-height:1;letter-spacing:-.01em;} .hero-band-side{text-align:right;} .hero-band-side p{margin:10px 0 0;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;line-height:2.1;color:#a8a8a8;} /* ========================================================= TICKER ========================================================= */ .ticker{background:var(--accent);color:var(--ink);border-bottom:var(--rule);overflow:hidden;padding:14px 0;white-space:nowrap;} .ticker-track{display:inline-flex;animation:nv-slide 28s linear infinite;} .ticker-track span{font-size:clamp(18px,2.4vw,26px);} @keyframes nv-slide{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* ========================================================= APPROACH ========================================================= */ .approach{position:relative;background:var(--white);} .approach-left{padding:70px var(--pad) 60px;border-right:var(--rule);display:flex;flex-direction:column;} .approach-left h2{font-size:clamp(40px,4.8vw,76px);margin-top:22px;} .quote{margin:auto 0 0;padding-top:20px;border-top:var(--rule);} .quote p{font-size:clamp(21px,2.2vw,28px);margin:0;} .quote cite{display:block;margin-top:14px;font-style:normal;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#777;font-weight:700;} .approach-right{padding:74px var(--pad) 0 52px;display:flex;flex-direction:column;} .approach-right p{font-size:17px;line-height:1.68;max-width:600px;} .pills{display:flex;gap:10px;flex-wrap:wrap;max-width:600px;margin-bottom:60px;} .approach-strip{ margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);height:160px; border-top:var(--rule);margin-left:-52px;margin-right:calc(var(--pad)*-1); } .approach-strip > div{border-left:var(--rule);overflow:hidden;} .approach-strip > div:first-child{border-left:0;} .approach-strip svg{width:100%;height:100%;display:block;} /* ========================================================= PROBLEM ========================================================= */ .problem{position:relative;background:var(--ink);color:var(--white);padding:70px 0 80px;overflow:hidden;} .problem h2{font-size:clamp(38px,5.2vw,84px);max-width:1000px;margin-top:24px;} .problem-deco{position:absolute;right:var(--pad);top:64px;width:250px;height:250px;color:var(--accent);z-index:1;} .problem-cres{position:absolute;right:130px;bottom:52px;width:120px;height:120px;z-index:1;} .problem .container-fluid{z-index:4;} .problem-grid{margin-top:54px;border-top:1.5px solid rgba(255,255,255,.35);} .problem-grid > div{padding:30px 34px 34px 0;border-right:1.5px solid rgba(255,255,255,.2);} .problem-grid > div:not(:first-child){padding-left:34px;} .problem-grid > div:last-child{border-right:0;} .problem-grid .num{font-family:'Clash Display',sans-serif;font-weight:700;font-size:15px;letter-spacing:.2em;color:var(--accent);} .problem-grid h3{font-family:'Clash Display',sans-serif;font-weight:600;font-size:27px;margin:14px 0 12px;line-height:1.05;} .problem-grid p{font-size:15px;color:#bcbcbc;margin:0;} .problem-kick{margin-top:50px;font-size:19px;max-width:880px;font-weight:500;} .problem-kick strong{color:var(--accent);font-weight:600;} .problem-lines{position:absolute;left:var(--pad);bottom:34px;width:300px;height:40px;color:rgba(255,255,255,.35);z-index:1;} /* ========================================================= SERVICES ========================================================= */ .services{position:relative;background:var(--paper);padding:66px 0 70px;} .services-head{padding-bottom:30px;} .services-head h2{font-size:clamp(40px,5.4vw,86px);} .services-head p{font-size:15.5px;color:#444;margin:0;} .services-list{border-top:var(--rule);margin:0;} .services-list li{ display:grid;grid-template-columns:74px minmax(220px,400px) 1fr 44px;align-items:center; padding:24px 0;border-bottom:1.5px solid rgba(14,14,14,.3);transition:padding-left .2s ease; } .services-list li:hover{padding-left:12px;} .services-list .num{font-family:'Clash Display',sans-serif;font-weight:700;font-size:14px;letter-spacing:.14em;color:var(--accent);} .services-list h3{font-family:'Clash Display',sans-serif;font-weight:600;font-size:clamp(22px,2.6vw,32px);text-transform:uppercase;line-height:1;} .services-list p{font-size:14.5px;color:#444;margin:0;padding-right:40px;} .services-list .arrow{font-size:24px;color:var(--accent);text-align:right;font-weight:700;} .services-foot{width:210px;height:34px;margin-top:36px;} /* ========================================================= PROCESS ========================================================= */ .process{position:relative;background:var(--white);padding:64px 0 70px;overflow:hidden;} .process-head h2{font-size:clamp(36px,5vw,80px);} .process-head p{font-size:15.5px;color:#444;margin:0;} .process-steps{margin:44px 0 0;border-top:var(--rule);border-bottom:var(--rule);} .process-steps li{padding:26px 22px 34px;border-right:1.5px solid rgba(14,14,14,.28);} .process-steps li:first-child{padding-left:0;} .process-steps li:last-child{border-right:0;} .process-steps .num{font-family:'Clash Display',sans-serif;font-weight:700;font-size:60px;line-height:.9;color:var(--accent);display:block;} .process-steps h3{font-family:'Clash Display',sans-serif;font-weight:600;font-size:23px;text-transform:uppercase;margin:10px 0;} .process-steps p{font-size:13.5px;color:#444;margin:0;} .process-rule{background:var(--ink);color:#ddd;} .process-rule-label{font-size:22px;color:var(--accent);padding:24px 26px;border-right:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;} .process-rule-body{display:flex;align-items:center;} .process-rule-body p{margin:0;padding:24px 30px;font-size:16.5px;} .process-rule strong{color:var(--white);font-weight:600;} .process-deco{grid-template-columns:repeat(3,1fr);width:300px;height:52px;margin:36px var(--pad) 0 auto;} /* ========================================================= WHO + CTA BAND ========================================================= */ .who{position:relative;background:var(--paper);padding:70px 0 0;} .who h2{font-size:clamp(38px,5.2vw,82px);margin-top:24px;max-width:1100px;} .who-chips{display:flex;flex-wrap:wrap;margin-top:44px;border-top:var(--rule);border-left:var(--rule);max-width:1120px;} .chip{padding:18px 26px;font-size:15px;font-weight:500;border-right:var(--rule);border-bottom:var(--rule);} .chip-k{background:var(--ink);color:var(--white);} .chip-o{background:var(--accent);} .who-line{margin-top:42px;font-size:20px;font-weight:500;max-width:820px;} .ctaband{ margin-top:60px;background:var(--ink);color:var(--white); display:grid;grid-template-columns:1fr auto 300px;align-items:center;gap:30px; padding-left:var(--pad);min-height:190px; } .ctaband-title{font-size:clamp(32px,3.6vw,54px);line-height:.95;} .ctaband-pat{grid-template-columns:1fr 1fr;height:190px;align-self:stretch;} /* ========================================================= CONTACT + FOOTER ========================================================= */ .contact{position:relative;background:var(--ink);color:var(--white);} .contact-left{padding:76px 56px 90px var(--pad);position:relative;} .contact-left h2{font-size:clamp(42px,6vw,96px);} .contact-lead{font-size:17.5px;color:#c2c2c2;max-width:500px;margin-top:26px;} .contact-meta{margin-top:42px;max-width:520px;border-top:1.5px solid rgba(255,255,255,.28);} .contact-meta > div{display:grid;grid-template-columns:150px 1fr;padding:14px 0;border-bottom:1.5px solid rgba(255,255,255,.18);} .contact-meta dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:700;padding-top:3px;} .contact-meta dd{margin:0;font-size:15px;} .contact-meta a{color:var(--white);} .contact-meta a:hover{color:var(--accent);} .contact-deco{position:absolute;left:var(--pad);bottom:24px;width:340px;height:80px;color:rgba(255,255,255,.3);z-index:1;} .contact-right{background:#171717;padding:64px 48px 70px;border-left:1.5px solid rgba(255,255,255,.2);} .contact-right h3{font-size:27px;margin-bottom:24px;} .field{margin-bottom:14px;} .field label{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#8a8a8a;margin-bottom:6px;font-weight:700;} .contact-right .form-control, .contact-right .form-select{ background:var(--ink);border:1.5px solid #333;color:var(--white); font-family:inherit;font-size:14.5px;padding:13px 15px; } .contact-right .form-control::placeholder{color:#5f5f5f;} .contact-right .form-control:focus, .contact-right .form-select:focus{ background:var(--ink);color:var(--white);border-color:var(--accent);box-shadow:none; } .contact-right .form-control.is-invalid, .contact-right .form-select.is-invalid{border-color:var(--accent);background-image:none;} .contact-right .invalid-feedback{color:#ff8a6b;font-size:12.5px;} .contact-right textarea.form-control{resize:vertical;min-height:98px;} /* honeypot: off screen, never focusable by tab */ .hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;opacity:0;} .btn-send{ background:var(--accent);color:var(--ink);border:0;padding:18px; display:flex;align-items:center;justify-content:center;gap:10px; } .btn-send:hover{background:var(--white);color:var(--ink);} .btn-send:disabled{opacity:.65;} .form-note{margin-top:14px;font-size:13.5px;min-height:20px;} .form-note.ok{color:var(--accent);} .form-note.bad{color:#ff8a6b;} .site-footer{ position:relative;z-index:4;border-top:1.5px solid rgba(255,255,255,.2); display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; padding:28px var(--pad);font-size:10.5px;color:#8a8a8a;letter-spacing:.2em;text-transform:uppercase; } .site-footer img{opacity:.85;} /* ---------- back to top ---------- */ .to-top{ position:fixed;right:24px;bottom:24px;z-index:1040; width:46px;height:46px;display:grid;place-items:center; background:var(--ink);color:var(--white);font-size:18px;text-decoration:none; opacity:0;pointer-events:none;transition:opacity .25s ease,background .18s ease; } .to-top.show{opacity:1;pointer-events:auto;} .to-top:hover{background:var(--accent);color:var(--ink);} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1199.98px){ .services-list li{grid-template-columns:60px minmax(190px,320px) 1fr 36px;} } @media (max-width:991.98px){ :root{--pad:28px;--nav-h:70px;} .nv{height:auto;min-height:var(--nav-h);} .nv > .container-fluid{min-height:var(--nav-h);height:auto;flex-wrap:wrap;} .nv .navbar-collapse{ background:var(--paper);border-top:var(--rule); margin:0 calc(var(--pad)*-1);padding:16px var(--pad) 26px;width:100vw; } .nv .navbar-nav{gap:0;margin-bottom:14px;} .nv .nav-link{ font-family:'Clash Display',sans-serif;font-weight:600;font-size:24px; letter-spacing:0;padding:10px 0;border-bottom:1px solid rgba(14,14,14,.15); } .nv .nav-link::after{display:none;} .nv-cta{display:inline-block;} .hero-row{min-height:0;} .hero-type{border-right:0;border-bottom:var(--rule);padding:44px var(--pad) 40px;} .hero-meta{justify-content:flex-start;} .hero-band{flex-direction:column;align-items:flex-start;gap:18px;} .hero-band-side{text-align:left;} .approach-left{border-right:0;border-bottom:var(--rule);} .quote{margin-top:40px;} .approach-right{padding:50px var(--pad) 0;} .approach-strip{margin-left:calc(var(--pad)*-1);height:120px;} .problem-grid > div{ border-right:0;border-bottom:1.5px solid rgba(255,255,255,.2); padding:26px 0 !important; } .problem-grid > div:last-child{border-bottom:0;} .services-head p,.process-head p{margin-top:18px;} .services-list li{grid-template-columns:46px 1fr;row-gap:10px;padding:22px 0;} .services-list h3,.services-list p{grid-column:2;} .services-list p{padding-right:0;} .services-list .arrow{display:none;} .services-list li:hover{padding-left:0;} .process-steps li{ padding:22px 18px 26px !important; border-bottom:1.5px solid rgba(14,14,14,.28); } .process-steps li:nth-child(even){border-right:0;} .process-rule-label{border-right:0;border-bottom:1.5px solid rgba(255,255,255,.25);} .ctaband{grid-template-columns:1fr;padding:40px var(--pad);gap:24px;} .ctaband .btn{justify-self:start;} .contact-left{padding:60px var(--pad) 40px;} .contact-right{border-left:0;border-top:1.5px solid rgba(255,255,255,.2);padding:48px var(--pad) 56px;} .site-footer{flex-direction:column;align-items:flex-start;gap:12px;} } @media (max-width:575.98px){ :root{--pad:20px;} .hero-type h1{font-size:34px;} .outline{-webkit-text-stroke-width:1.5px;} .process-steps li{border-right:0 !important;} .chip{padding:14px 18px;font-size:14px;} .to-top{right:14px;bottom:14px;} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} .ticker-track{animation:none;} *{transition-duration:.01ms !important;} } /* ---------- print ---------- */ @media print{ .nv,.to-top,.grain,.ticker{display:none !important;} body{background:#fff;color:#000;} }