/* ========================================================================== SHOPROVISION — metalo konstrukcijos Fonts are loaded once via in each page's . ========================================================================== */ :root{ --bg:#0a0a0a; --bg-alt:#141414; --panel:#181818; --panel-2:#1f1f1f; --line:rgba(244,242,238,0.08); --line-strong:rgba(244,242,238,0.18); --steel:#8b9096; --steel-dim:#54585c; --red:#e2231c; --red-light:#ff4a3d; --white:#f4f2ee; --white-dim:#9a9691; --font-display:'Big Shoulders Display', sans-serif; --font-body:'IBM Plex Sans', sans-serif; --font-mono:'IBM Plex Mono', monospace; --font-nav:'Sora', sans-serif; --container: min(1240px, 92vw); --ease: cubic-bezier(.22,.68,.36,1); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--white); font-family:var(--font-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; cursor:default; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ul,ol{ list-style:none; } button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; } /* Keyboard focus — visible for keyboard users, unobtrusive for mouse users */ :focus-visible{ outline:2px solid var(--red); outline-offset:3px; } /* grain overlay */ body::before{ content:""; position:fixed; inset:0; z-index:200; pointer-events:none; opacity:0.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .skip-link{ position:absolute; top:-100px; left:1rem; background:var(--red); color:var(--white); padding:.75rem 1.25rem; font-family:var(--font-mono); font-size:.85rem; z-index:1000; transition:top .2s var(--ease); } .skip-link:focus{ top:1rem; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .marquee-track{ animation-duration:32s !important; animation-iteration-count:infinite !important; } } /* ========================================================================== Typography helpers ========================================================================== */ .eyebrow{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; color:var(--red-light); margin-bottom:1.1rem; } .eyebrow-dash{ width:26px; height:1px; background:var(--red); flex-shrink:0; } h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem, 5.2vw, 4.2rem); line-height:0.98; letter-spacing:-0.01em; text-transform:uppercase; } .text-outline{ color:transparent; -webkit-text-stroke:1.5px var(--white-dim); } .section-head{ max-width:var(--container); margin:0 auto 3.5rem; padding:0 0; } section{ position:relative; } /* ========================================================================== Reveal-on-scroll ========================================================================== */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--d, 0) * 90ms); } .reveal.is-visible{ opacity:1; transform:translateY(0); } /* ========================================================================== Buttons ========================================================================== */ .btn{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; padding:.9rem 1.6rem; border:1px solid transparent; transition:transform .35s var(--ease), background .3s, border-color .3s, color .3s; white-space:nowrap; } .btn-primary{ background:var(--red); color:#0a0a0a; font-weight:600; } .btn-primary:hover{ background:var(--red-light); transform:translateY(-2px); } .btn-lg{ padding:1.15rem 2.2rem; font-size:.9rem; } .btn-ghost{ border-color:var(--line-strong); color:var(--white); } .btn-ghost svg{ transition:transform .3s var(--ease); } .btn-ghost:hover{ border-color:var(--red); color:var(--red-light); } .btn-ghost:hover svg{ transform:translateX(4px); } .btn-nav{ border:1px solid var(--line-strong); padding:.65rem 1.2rem; font-family:var(--font-nav); font-weight:700; font-size:.76rem; } .btn-nav:hover{ border-color:var(--red); color:var(--red-light); } /* ========================================================================== Nav ========================================================================== */ .nav{ position:fixed; top:0; left:0; right:0; z-index:120; border-bottom:1px solid transparent; transition:background .4s var(--ease), border-color .4s var(--ease); } .nav.scrolled{ background:rgba(10,10,10,0.88); backdrop-filter:blur(10px); border-bottom-color:var(--line); } .nav-inner{ max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:1.3rem 0; } .logo{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; letter-spacing:.01em; white-space:nowrap; } .logo-red{ color:var(--red); } .logo-white{ color:var(--white); } .nav-links{ display:flex; gap:2rem; } .nav-links a{ font-family:var(--font-nav); font-weight:700; font-size:.86rem; letter-spacing:.01em; text-transform:uppercase; color:var(--white-dim); display:flex; align-items:center; gap:.4rem; transition:color .25s; position:relative; } .nav-links a span{ color:var(--steel-dim); font-family:var(--font-mono); font-weight:400; text-transform:none; font-size:.68rem; } .nav-links a:hover{ color:var(--white); } .nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--red); transition:width .3s var(--ease); } .nav-links a:hover::after{ width:100%; } .lang-switch{ display:flex; align-items:center; gap:2px; padding:3px; background:var(--panel-2); border:1px solid var(--line-strong); border-radius:6px; } .lang-switch button{ font-family:var(--font-nav); font-weight:700; font-size:.72rem; letter-spacing:.02em; color:var(--white-dim); padding:.35rem .6rem; border-radius:4px; transition:background .25s var(--ease), color .25s var(--ease); } .lang-switch button:hover{ color:var(--white); } .lang-switch button.active{ background:var(--red); color:#0a0a0a; } .menu-toggle{ display:none; flex-direction:column; gap:5px; width:26px; z-index:120; } .menu-toggle span{ height:1.5px; width:100%; background:var(--white); transition:transform .3s var(--ease), opacity .3s var(--ease); } .menu-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .menu-toggle.open span:nth-child(2){ opacity:0; } .menu-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } .mobile-menu{ position:fixed; inset:0; background:var(--bg); z-index:110; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2.2rem; padding:0 8vw; transform:translateY(-100%); transition:transform .5s var(--ease); } .mobile-menu.open{ transform:translateY(0); } .mobile-menu nav{ display:flex; flex-direction:column; gap:1.4rem; } .mobile-menu nav a{ font-family:var(--font-display); font-weight:700; font-size:2.6rem; text-transform:uppercase; color:var(--white); } .mobile-menu nav a:hover{ color:var(--red-light); } /* ========================================================================== Hero ========================================================================== */ .hero{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8rem 6vw 5rem; overflow:hidden; background: radial-gradient(ellipse 70% 60% at 78% 30%, rgba(226,35,28,0.18), transparent 65%), var(--bg); } .hero-grid{ position:absolute; inset:0; background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 72px); -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 40%, black 30%, transparent 88%); mask-image:radial-gradient(ellipse 75% 65% at 50% 40%, black 30%, transparent 88%); } .hero-building{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; pointer-events:none; filter:brightness(0.7) saturate(0.9); } .hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(ellipse 70% 60% at 50% 48%, rgba(10,8,7,0.78), rgba(10,8,7,0.5) 70%, transparent), linear-gradient(180deg, rgba(10,8,7,0.82) 0%, rgba(10,8,7,0.45) 35%, rgba(10,8,7,0.6) 70%, rgba(10,8,7,0.9) 100%); } .hero-sparks{ position:absolute; inset:0; pointer-events:none; z-index:1; } .spark{ position:absolute; bottom:6%; width:3px; height:3px; border-radius:50%; background:var(--red-light); box-shadow:0 0 6px 1px rgba(255,74,61,0.7); opacity:0; animation-name:sparkRise; animation-timing-function:ease-out; animation-iteration-count:infinite; } .spark.white{ background:var(--white); box-shadow:0 0 5px 1px rgba(244,242,238,0.6); } @keyframes sparkRise{ 0%{ opacity:0; transform:translate(0,0) scale(1); } 8%{ opacity:1; } 75%{ opacity:.8; } 100%{ opacity:0; transform:translate(var(--drift,18px),-380px) scale(.3); } } .hero-frame .corner{ position:absolute; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--steel-dim); z-index:2; } .corner.tl{ top:6.5rem; left:6vw; } .corner.tr{ top:6.5rem; right:6vw; } .corner.bl{ bottom:4.5rem; left:6vw; } .corner.br{ bottom:4.5rem; right:6vw; } .hero-annotations{ z-index:2; } .annotation{ position:absolute; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; color:var(--white-dim); animation:floatY 5s ease-in-out infinite alternate; } .annotation::before{ content:""; position:absolute; top:50%; left:-18px; width:12px; height:1px; background:var(--red); } .a1{ top:24%; left:9vw; animation-delay:.2s; } .a2{ top:32%; right:8vw; animation-delay:1.1s; } .a3{ bottom:30%; left:11vw; animation-delay:.6s; } .a4{ bottom:24%; right:9vw; animation-delay:1.6s; } @keyframes floatY{ from{ transform:translateY(-4px); } to{ transform:translateY(6px); } } @media (max-width:1100px){ .hero-annotations{ display:none; } } .hero-content{ position:relative; z-index:3; max-width:960px; text-align:center; } .hero-title{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:clamp(2.5rem, 10.5vw, 7.2rem); line-height:0.86; letter-spacing:-0.01em; } .hero-title .line{ display:block; } .hero-title .char{ display:inline-block; opacity:0; transform:translateY(34px) scale(.85); animation:charIn .7s var(--ease) forwards; } @keyframes charIn{ 60%{ opacity:1; transform:translateY(-3px) scale(1.04); } 100%{ opacity:1; transform:translateY(0) scale(1); } } .split-title.reveal{ opacity:1; transform:none; transition:none; } .split-title .char{ display:inline-block; opacity:0; transform:translateY(36px) scale(.85); } .split-title.is-visible .char{ animation:charIn .85s var(--ease) forwards; } .line-solid{ color:var(--white); } .line-outline{ color:transparent; -webkit-text-stroke:2px var(--steel); } .line-accent{ background:linear-gradient(100deg, var(--red-light), var(--red) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-sub{ margin:2.1rem auto 0; max-width:34rem; color:var(--white-dim); font-size:1.08rem; } .hero-cta{ margin-top:2.6rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; } .scroll-cue{ position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.15em; color:var(--steel-dim); z-index:2; } .scroll-cue span{ width:1px; height:34px; background:linear-gradient(var(--red), transparent); animation:scrollLine 1.8s ease-in-out infinite; } @keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 50.01%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } } /* ========================================================================== Marquee ========================================================================== */ .marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-alt); overflow:hidden; padding:1.1rem 0; } .marquee-track{ display:flex; gap:1.4rem; width:max-content; animation:marquee 32s linear infinite; } .marquee-track span{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:.03em; text-transform:uppercase; color:var(--white-dim); } .marquee-track i{ font-style:normal; color:var(--red); } @keyframes marquee{ to{ transform:translateX(-50%); } } /* ========================================================================== Hazard strip ========================================================================== */ .hazard-strip{ height:10px; background-image:repeating-linear-gradient(45deg, var(--red) 0 18px, #0a0a0a 18px 36px); background-size:200% 100%; animation:hazardMove 5s linear infinite; } @keyframes hazardMove{ to{ background-position:-72px 0; } } /* ========================================================================== Stats ========================================================================== */ .stats{ position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: radial-gradient(ellipse 55% 130% at 50% 50%, rgba(226,35,28,0.10), transparent 72%), linear-gradient(90deg, var(--bg) 0%, var(--bg-alt) 50%, var(--bg) 100%); overflow:hidden; } .stats::before{ content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:min(1240px, 92vw); height:1px; background:linear-gradient(90deg, transparent, rgba(226,35,28,0.55), transparent); } .stats-grid{ max-width:var(--container); margin:0 auto; padding:1.5rem 0; display:grid; grid-template-columns:repeat(4, 1fr); gap:0; } .stat{ position:relative; padding:.4rem 1.8rem; transition:transform .4s var(--ease); } .stat::before{ content:""; display:block; width:26px; height:3px; background:var(--red); margin-bottom:1.05rem; transition:width .4s var(--ease); } .stat::after{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:64px; background:linear-gradient(180deg, transparent, var(--line-strong) 25%, var(--line-strong) 75%, transparent); } .stat:first-child::after{ display:none; } .stat:hover{ transform:translateY(-5px); } .stat:hover::before{ width:48px; } .stat-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem, 4.6vw, 3.8rem); line-height:1; background:linear-gradient(160deg, var(--red-light), var(--red) 80%); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat-suffix{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--red); margin-left:.05em; } .stat p{ margin-top:.7rem; font-family:var(--font-mono); font-size:.76rem; color:var(--white-dim); letter-spacing:.03em; } /* ========================================================================== Services (dense spec-sheet grid) ========================================================================== */ .services{ position:relative; overflow:hidden; padding:6rem 0 7rem; background: radial-gradient(ellipse 50% 55% at 3% 5%, rgba(226,35,28,0.13), transparent 60%), radial-gradient(ellipse 45% 50% at 100% 95%, rgba(139,144,150,0.09), transparent 60%), linear-gradient(160deg, var(--bg) 0%, var(--bg-alt) 70%); } .services-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; pointer-events:none; filter:brightness(0.48) saturate(0.95); } .services-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(10,8,7,0.6), rgba(10,8,7,0.4) 70%, transparent), linear-gradient(180deg, rgba(10,8,7,0.78) 0%, rgba(10,8,7,0.5) 45%, rgba(10,8,7,0.78) 100%); } .services.has-bg .services-scrim{ opacity:1; } .services > .section-head, .services > .services-grid{ position:relative; z-index:1; } .services .section-head{ text-align:left; padding:0 6vw; } .services-grid{ max-width:var(--container); margin:0 auto; padding:0 6vw; display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; } .service-tile{ position:relative; display:block; overflow:hidden; background:rgba(10,8,7,0.3); border:1px solid var(--line); padding:1.9rem 1.7rem; isolation:isolate; } .tile-fill{ position:absolute; inset:0; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); z-index:0; } .service-tile:hover .tile-fill{ transform:scaleX(1); } .tile-num{ position:absolute; z-index:0; top:1.3rem; right:1.5rem; font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:1; color:var(--line-strong); transition:color .35s; } .service-tile:hover .tile-num{ color:rgba(10,8,7,0.28); } .tile-content{ position:relative; z-index:1; display:block; padding-right:2.6rem; } .tile-content h3{ font-family:var(--font-display); font-weight:700; font-size:1.28rem; text-transform:uppercase; line-height:1.05; margin-bottom:.5rem; transition:color .3s; } .tile-content p{ font-size:.82rem; color:var(--white-dim); transition:color .3s; } .service-tile:hover .tile-content h3, .service-tile:hover .tile-content p{ color:#0a0a0a; } .tile-arrow{ position:absolute; z-index:1; bottom:1.5rem; right:1.6rem; width:17px; height:17px; color:var(--red-light); opacity:0; transform:translate(-6px, 6px); transition:opacity .3s var(--ease), transform .3s var(--ease), color .3s; } .service-tile:hover .tile-arrow{ opacity:1; transform:translate(0, 0); color:#0a0a0a; } /* ========================================================================== Store fit-out ========================================================================== */ .storefit{ padding:2rem 0 7.5rem; background: radial-gradient(ellipse 50% 60% at 8% 100%, rgba(226,35,28,0.14), transparent 65%), radial-gradient(ellipse 45% 50% at 95% 0%, rgba(139,144,150,0.12), transparent 60%), linear-gradient(135deg, var(--bg-alt) 0%, var(--bg) 60%); } .storefit .section-head{ text-align:left; padding:0 6vw; } .storefit-grid{ max-width:var(--container); margin:0 auto; padding:0 6vw; display:grid; grid-template-columns:1fr 1.1fr; gap:3.5rem; align-items:start; } .storefit-intro > p{ font-size:1.05rem; color:var(--white-dim); margin-bottom:2rem; max-width:32rem; } .storefit-callout{ border-left:2px solid var(--red); padding:.2rem 0 .2rem 1.2rem; margin-bottom:1.6rem; } .storefit-callout p{ margin-top:.5rem; font-size:.92rem; color:var(--white-dim); max-width:28rem; } .storefit-list{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); } .storefit-list li{ display:flex; align-items:center; gap:.8rem; padding:1.1rem .5rem; border-bottom:1px solid var(--line); font-family:var(--font-body); font-weight:500; font-size:.98rem; transition:color .25s, padding-left .25s var(--ease); } .storefit-list li:nth-child(odd){ border-right:1px solid var(--line); padding-right:1.5rem; } .storefit-list li svg{ width:18px; height:18px; flex-shrink:0; color:var(--red); } .storefit-list li:hover{ color:var(--red-light); padding-left:.9rem; } @media (max-width:900px){ .storefit-grid{ grid-template-columns:1fr; } .storefit-list{ grid-template-columns:1fr; } .storefit-list li:nth-child(odd){ border-right:none; padding-right:.5rem; } } /* ========================================================================== Workshop / on-site split ========================================================================== */ .materials{ display:grid; grid-template-columns:1fr 1fr; min-height:56vh; position:relative; } .materials-side{ padding:5rem 6vw; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; } .materials-bg{ position:absolute; inset:0; z-index:0; opacity:.16; pointer-events:none; } .materials-bg svg{ width:100%; height:100%; } .materials-bg-workshop{ color:var(--steel); } .materials-bg-onsite{ color:var(--red-light); } .materials-side > *:not(.materials-bg){ position:relative; z-index:1; } .side-metal{ background:linear-gradient(135deg, #1c1c1c, #0e0e0e 70%); clip-path:polygon(0 0, 100% 0, 88% 100%, 0% 100%); padding-right:9vw; } .side-onsite{ background:linear-gradient(135deg, #2a1210, #170908 70%); clip-path:polygon(12% 0, 100% 0, 100% 100%, 0% 100%); margin-left:-6vw; padding-left:9vw; } .mat-label{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 4vw, 3rem); text-transform:uppercase; margin-bottom:1rem; } .side-metal .mat-label{ color:var(--steel); } .side-onsite .mat-label{ color:var(--red-light); } .materials-side p{ max-width:26rem; color:var(--white-dim); font-size:.96rem; } /* ========================================================================== Weld-seam divider ========================================================================== */ .weld-divider{ position:relative; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.6rem 0 2rem; } .weld-divider svg{ width:100%; height:44px; color:var(--red); overflow:visible; } .weld-travel{ /* path tiles every 1200 user-units; shift by one tile = seamless loop */ animation:weldScroll 14s linear infinite; } @keyframes weldScroll{ from{ transform:translateX(0); } to{ transform:translateX(-1200px); } } .spatter{ fill:var(--red-light); animation:spatterPulse 1.8s ease-in-out infinite; } @keyframes spatterPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.6); } } @media (prefers-reduced-motion:reduce){ .weld-travel{ animation:none; } .spatter{ animation:none; } } .weld-label{ display:block; text-align:center; margin-top:.6rem; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.18em; color:var(--steel-dim); } /* ========================================================================== Process ========================================================================== */ .process{ position:relative; overflow:hidden; padding:7.5rem 0; background: radial-gradient(ellipse 55% 45% at 88% 8%, rgba(226,35,28,0.16), transparent 60%), radial-gradient(ellipse 60% 50% at 5% 95%, rgba(139,144,150,0.1), transparent 60%), linear-gradient(165deg, var(--bg-alt) 0%, var(--bg) 55%); } .process-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; pointer-events:none; filter:brightness(0.55) saturate(0.9); } .process-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; background: radial-gradient(ellipse 75% 65% at 30% 50%, rgba(10,8,7,0.82), rgba(10,8,7,0.55) 70%, transparent), linear-gradient(180deg, rgba(10,8,7,0.85) 0%, rgba(10,8,7,0.5) 40%, rgba(10,8,7,0.75) 100%); } .process.has-bg .process-scrim{ opacity:1; } .process > .section-head, .process > .process-wrap{ position:relative; z-index:1; } .process .section-head{ text-align:left; padding:0 6vw; } .process-wrap{ max-width:var(--container); margin:0 auto; padding:0 6vw; position:relative; } .process-rail{ position:absolute; top:0; bottom:0; left:6vw; width:2px; } .process-track{ position:absolute; inset:0; background:var(--line-strong); } .process-fill{ position:absolute; top:0; left:0; width:100%; height:0%; background:var(--red); transition:height .1s linear; } .process-list{ padding-left:1.6rem; } .process-item{ display:grid; grid-template-columns:110px 1fr; gap:2rem; align-items:start; padding:2.6rem 0; border-top:1px solid var(--line); position:relative; } .process-item:last-child{ border-bottom:1px solid var(--line); } .process-num{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:var(--steel-dim); transition:color .35s; } .process-item:hover .process-num{ color:var(--red); } .process-body h3{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; text-transform:uppercase; margin-bottom:.5rem; } .process-body p{ color:var(--white-dim); max-width:38rem; font-size:.95rem; } /* ========================================================================== Projects ========================================================================== */ .projects{ padding:6rem 0 7.5rem; background: radial-gradient(ellipse 55% 50% at 95% 100%, rgba(226,35,28,0.14), transparent 60%), radial-gradient(ellipse 40% 45% at 5% 0%, rgba(139,144,150,0.1), transparent 60%), linear-gradient(200deg, var(--bg-alt) 0%, var(--bg) 65%); } .projects .section-head{ text-align:left; padding:0 6vw; } .projects-grid{ max-width:var(--container); margin:0 auto; padding:0 6vw; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; } .project-card{ position:relative; background:var(--panel); border:1px solid var(--line); overflow:hidden; transform:perspective(760px) rotateX(0) rotateY(0); transition:border-color .35s var(--ease), transform .3s var(--ease); } .project-card:hover{ border-color:var(--red); } .project-art{ aspect-ratio:16/10; color:var(--line-strong); background: linear-gradient(160deg, rgba(226,35,28,0.1), transparent 60%), var(--panel-2); transition:color .4s var(--ease); } .project-card:hover .project-art{ color:var(--red); } .project-art svg{ width:100%; height:100%; } .project-art.has-photo{ position:relative; background:var(--panel-2); overflow:hidden; } .project-art.has-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.15) contrast(1.05); transition:transform .5s var(--ease), filter .4s var(--ease); } .project-card:hover .project-art.has-photo img{ transform:scale(1.06); filter:grayscale(0) contrast(1.05); } .no-photo-label{ display:none; position:absolute; inset:0; align-items:center; justify-content:center; text-align:center; padding:1.5rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.03em; color:var(--steel-dim); border:1px dashed var(--line-strong); } .project-art.has-photo.no-photo img{ display:none; } .project-art.has-photo.no-photo .no-photo-label{ display:flex; } .project-info{ padding:1.5rem 1.5rem 1.7rem; } .project-top{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; color:var(--red-light); margin-bottom:.9rem; } .project-top .year{ color:var(--steel-dim); } .project-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.45rem; text-transform:uppercase; margin-bottom:.35rem; } .project-desc{ color:var(--white-dim); font-size:.86rem; margin-bottom:1.1rem; } .project-specs{ display:flex; gap:1.6rem; border-top:1px solid var(--line); padding-top:.9rem; } .project-specs dt{ font-family:var(--font-mono); font-size:.64rem; color:var(--steel-dim); letter-spacing:.05em; margin-bottom:.2rem; } .project-specs dd{ font-size:.85rem; color:var(--white); } /* ========================================================================== Why us ========================================================================== */ .whyus{ padding:3.25rem 0; background: radial-gradient(ellipse 55% 60% at 92% 5%, rgba(226,35,28,0.12), transparent 60%), radial-gradient(ellipse 45% 50% at 5% 98%, rgba(139,144,150,0.07), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); } .whyus .section-head{ text-align:left; padding:0 6vw; margin-bottom:1.8rem; } .whyus-grid{ counter-reset:whyus; max-width:var(--container); margin:0 auto; padding:0 6vw; display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; } .whyus-card{ counter-increment:whyus; position:relative; overflow:hidden; flex:1 1 300px; max-width:400px; background:linear-gradient(158deg, var(--panel) 0%, var(--bg) 120%); border:1px solid var(--line); padding:1.5rem 1.5rem 1.6rem; transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); } .whyus-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .whyus-card::after{ content:counter(whyus, decimal-leading-zero); position:absolute; top:.9rem; right:1.1rem; font-family:var(--font-display); font-weight:800; font-size:1.9rem; line-height:1; color:var(--line-strong); transition:color .35s var(--ease); } .whyus-card:hover{ border-color:var(--red); transform:translateY(-5px); box-shadow:0 16px 38px -22px rgba(226,35,28,0.55); } .whyus-card:hover::before{ transform:scaleX(1); } .whyus-card:hover::after{ color:rgba(226,35,28,0.35); } .whyus-icon{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:1rem; border-radius:11px; background:rgba(226,35,28,0.09); border:1px solid rgba(226,35,28,0.28); color:var(--red-light); transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .whyus-icon svg{ width:22px; height:22px; } .whyus-card:hover .whyus-icon{ color:#0a0a0a; background:var(--red); border-color:var(--red); transform:scale(1.06); } .whyus-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; text-transform:uppercase; line-height:1.05; margin-bottom:.45rem; padding-right:2rem; } .whyus-card p{ color:var(--white-dim); font-size:.87rem; line-height:1.55; } @media (max-width:920px){ .whyus-card{ flex:1 1 260px; } } @media (max-width:560px){ .whyus-grid{ flex-direction:column; } .whyus-card{ max-width:none; } } /* ========================================================================== Testimonials ========================================================================== */ .testimonials{ position:relative; overflow:hidden; padding:7rem 0 7.5rem; background: radial-gradient(ellipse 50% 60% at 0% 50%, rgba(226,35,28,0.12), transparent 60%), radial-gradient(ellipse 50% 60% at 100% 50%, rgba(139,144,150,0.09), transparent 60%), var(--bg); } .testimonials-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; pointer-events:none; filter:brightness(0.6) saturate(0.95); } .testimonials-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; background: radial-gradient(ellipse 75% 65% at 50% 45%, rgba(10,8,7,0.42), rgba(10,8,7,0.2) 70%, transparent), linear-gradient(180deg, rgba(10,8,7,0.6) 0%, rgba(10,8,7,0.25) 45%, rgba(10,8,7,0.6) 100%); } .testimonials.has-bg .testimonials-scrim{ opacity:1; } .testimonials > .section-head, .testimonials > .testimonials-grid{ position:relative; z-index:1; } .testimonials .section-head{ text-align:left; padding:0 6vw; } .testimonials-grid{ max-width:var(--container); margin:0 auto; padding:0 6vw; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; } .testimonial-card{ position:relative; background:var(--panel); border:1px solid var(--line); padding:2rem 1.8rem; display:flex; flex-direction:column; transition:border-color .35s var(--ease), transform .35s var(--ease); } .testimonial-card:hover{ border-color:var(--red); transform:translateY(-4px); } .stars{ display:flex; gap:.25rem; margin-bottom:1.2rem; } .stars svg{ width:16px; height:16px; fill:#f5c518; opacity:0; transform:scale(0) rotate(-90deg); transform-origin:center; } .testimonial-card.is-visible .stars svg{ animation:starPop .5s cubic-bezier(.34,1.56,.64,1) forwards; } .testimonial-card.is-visible .stars svg:nth-child(1){ animation-delay:calc(var(--d,0) * 90ms + 700ms); } .testimonial-card.is-visible .stars svg:nth-child(2){ animation-delay:calc(var(--d,0) * 90ms + 770ms); } .testimonial-card.is-visible .stars svg:nth-child(3){ animation-delay:calc(var(--d,0) * 90ms + 840ms); } .testimonial-card.is-visible .stars svg:nth-child(4){ animation-delay:calc(var(--d,0) * 90ms + 910ms); } .testimonial-card.is-visible .stars svg:nth-child(5){ animation-delay:calc(var(--d,0) * 90ms + 980ms); } @keyframes starPop{ 0%{ opacity:0; transform:scale(0) rotate(-90deg); } 55%{ opacity:1; transform:scale(1.35) rotate(12deg); } 80%{ transform:scale(.92) rotate(-4deg); } 100%{ opacity:1; transform:scale(1) rotate(0deg); } } .testimonial-text{ font-size:.96rem; line-height:1.6; color:var(--white); margin-bottom:1.6rem; flex-grow:1; } .testimonial-author{ display:flex; flex-direction:column; gap:.2rem; padding-top:1.2rem; border-top:1px solid var(--line); } .author-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; text-transform:uppercase; } .author-role{ font-family:var(--font-mono); font-size:.72rem; color:var(--steel-dim); } @media (max-width:900px){ .testimonials-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .testimonials-grid{ grid-template-columns:1fr; } } /* ========================================================================== CTA ========================================================================== */ .cta{ background: radial-gradient(ellipse 65% 55% at 50% 0%, rgba(226,35,28,0.20), transparent 65%), radial-gradient(ellipse 40% 40% at 92% 100%, rgba(139,144,150,0.1), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 45%, var(--bg) 100%); padding:8rem 6vw 6rem; text-align:center; position:relative; overflow:hidden; } .cta-grid{ position:absolute; inset:0; background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 72px); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 85%); mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 85%); } .cta > *{ position:relative; z-index:1; } .cta > .cta-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; pointer-events:none; filter:brightness(0.55) saturate(0.9); } .cta > .cta-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; background: radial-gradient(ellipse 70% 65% at 50% 45%, rgba(10,8,7,0.82), rgba(10,8,7,0.55) 70%, transparent), linear-gradient(180deg, rgba(10,8,7,0.85) 0%, rgba(10,8,7,0.5) 45%, rgba(10,8,7,0.8) 100%); } .cta.has-bg > .cta-scrim{ opacity:1; } .cta .eyebrow{ justify-content:center; } .cta h2{ margin-bottom:1.2rem; } .cta-sub{ max-width:32rem; margin:0 auto; color:var(--white-dim); } .cta .btn-lg{ margin-top:2.4rem; } .cta-contacts{ margin-top:5rem; display:flex; justify-content:center; gap:3.2rem; flex-wrap:wrap; padding-top:2.5rem; border-top:1px solid var(--line); } .cta-contacts div{ display:flex; flex-direction:column; gap:.4rem; } .cta-label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; color:var(--steel-dim); } .cta-contacts a{ transition:color .25s; } .cta-contacts a:hover{ color:var(--red-light); } /* ========================================================================== Social bar ========================================================================== */ .social-bar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); } .social-bar-inner{ max-width:var(--container); margin:0 auto; padding:0 6vw; display:flex; } .social-item{ display:flex; align-items:center; gap:1rem; flex:1; padding:1.7rem 1.6rem; border-right:1px solid var(--line); text-decoration:none; color:inherit; transition:background .3s var(--ease); } .social-item:first-child{ padding-left:0; } .social-item:last-child{ border-right:none; padding-right:0; } .social-item:hover{ background:rgba(226,35,28,0.06); } .social-icon{ width:40px; height:40px; flex-shrink:0; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--steel); transition:color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); } .social-icon svg{ width:19px; height:19px; } .social-item:hover .social-icon{ color:#0a0a0a; background:var(--red); border-color:var(--red); } .social-text{ display:flex; flex-direction:column; gap:.15rem; } .social-name{ font-family:var(--font-nav); font-weight:700; font-size:.92rem; color:var(--white); } .social-handle{ font-family:var(--font-mono); font-size:.72rem; color:var(--steel-dim); } @media (max-width:700px){ .social-bar-inner{ flex-direction:column; padding:0 6vw; } .social-item{ border-right:none; border-bottom:1px solid var(--line); padding:1.3rem 0; } .social-item:first-child{ padding-left:0; } .social-item:last-child{ border-bottom:none; padding-bottom:0; } } /* ========================================================================== Footer ========================================================================== */ .footer{ position:relative; padding:5rem 6vw 2rem; border-top:1px solid var(--line); overflow:hidden; background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(226,35,28,0.12), transparent 65%), linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); } .footer-grid{ position:absolute; inset:0; opacity:.5; background-image:repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 72px); } .footer-top{ position:relative; z-index:1; margin-bottom:3.5rem; max-width:26rem; } .footer-top p{ margin-top:.9rem; color:var(--white-dim); font-size:.92rem; } .footer-links{ position:relative; z-index:1; display:flex; gap:2.2rem; flex-wrap:wrap; margin-bottom:3rem; font-family:var(--font-mono); font-size:.8rem; } .footer-links a{ color:var(--white-dim); transition:color .25s; } .footer-links a:hover{ color:var(--red-light); } .footer-bottom{ position:relative; z-index:1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:1.6rem; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:.72rem; color:var(--steel-dim); letter-spacing:.04em; } /* ========================================================================== Custom cursor ========================================================================== */ .cursor-ring{ position:fixed; top:0; left:0; width:24px; height:24px; border:1px solid var(--red-light); transform:translate(-50%,-50%) rotate(45deg); pointer-events:none; z-index:300; mix-blend-mode:difference; transition:width .25s var(--ease), height .25s var(--ease), border-radius .25s var(--ease), opacity .25s; opacity:0; } .cursor-ring.active{ opacity:1; } .cursor-ring.hover{ width:52px; height:52px; border-color:var(--white); } @media (pointer:coarse){ .cursor-ring{ display:none; } } /* ========================================================================== Clickable project card affordance ========================================================================== */ .project-card-clickable{ cursor:pointer; } .project-card-clickable:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; } .project-view-more{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.1rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--red-light); opacity:0; transform:translateY(4px); transition:opacity .3s var(--ease), transform .3s var(--ease); } .project-view-more svg{ transition:transform .3s var(--ease); } .project-card-clickable:hover .project-view-more, .project-card-clickable:focus-visible .project-view-more{ opacity:1; transform:translateY(0); } .project-card-clickable:hover .project-view-more svg{ transform:translateX(3px); } /* ========================================================================== Project modal ========================================================================== */ .project-modal{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:4vh 5vw; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); } .project-modal.open{ opacity:1; pointer-events:auto; } .project-modal-backdrop{ position:absolute; inset:0; background:rgba(5,4,4,0.82); backdrop-filter:blur(4px); } .project-modal-panel{ position:relative; z-index:1; width:min(720px, 100%); max-height:90vh; overflow-y:auto; background:var(--panel); border:1px solid var(--line-strong); transform:translateY(24px) scale(.98); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease); } .project-modal.open .project-modal-panel{ transform:translateY(0) scale(1); opacity:1; } .project-modal-close{ position:sticky; top:1rem; left:100%; margin-right:1rem; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--bg); border:1px solid var(--line-strong); border-radius:50%; color:var(--white); transition:color .25s, border-color .25s, transform .25s; z-index:2; } .project-modal-close:hover{ color:var(--red-light); border-color:var(--red); transform:rotate(90deg); } .project-modal-body{ padding:0 2.6rem 2.6rem; margin-top:-2.6rem; } .project-modal-head{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; margin-bottom:.9rem; } .project-modal-head .tag{ color:var(--red-light); } .project-modal-head .year{ color:var(--steel-dim); } .project-modal-panel h3{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem, 3.4vw, 2.4rem); text-transform:uppercase; line-height:1.02; margin-bottom:1.1rem; } .project-modal-desc{ color:var(--white-dim); font-size:1rem; line-height:1.65; margin-bottom:1.6rem; max-width:38rem; } .project-modal-specs{ display:flex; flex-wrap:wrap; gap:2rem; padding:1.3rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:1.8rem; } .project-modal-specs dt{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; color:var(--steel-dim); margin-bottom:.3rem; } .project-modal-specs dd{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--white); } .project-modal-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; } .project-modal-gallery img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--panel-2); } .project-modal-gallery .gallery-empty{ grid-column:1 / -1; padding:2.4rem; text-align:center; font-family:var(--font-mono); font-size:.74rem; color:var(--steel-dim); border:1px dashed var(--line-strong); } @media (max-width:640px){ .project-modal{ padding:0; } .project-modal-panel{ width:100%; max-height:100vh; height:100%; border:none; } .project-modal-body{ padding:0 1.4rem 2rem; } .project-modal-gallery{ grid-template-columns:1fr; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1140px){ .nav-links{ display:none; } .menu-toggle{ display:flex; } } @media (max-width:900px){ .stats-grid{ grid-template-columns:repeat(2,1fr); gap:2.6rem 0; } .stat:nth-child(odd)::after{ display:none; } .services-grid{ grid-template-columns:repeat(2,1fr); } .projects-grid{ grid-template-columns:repeat(2,1fr); } .materials{ grid-template-columns:1fr; } .side-metal{ clip-path:none; padding-right:6vw; } .side-onsite{ clip-path:none; margin-left:0; padding-left:6vw; } .process-rail{ display:none; } .process-list{ padding-left:0; } .process-item{ grid-template-columns:60px 1fr; } .cta-contacts{ gap:2.4rem; } .cursor-ring{ display:none; } } @media (max-width:600px){ .services-grid{ grid-template-columns:1fr; } .projects-grid{ grid-template-columns:1fr; } .hero{ padding-top:7rem; } .corner.tl, .corner.tr{ top:5.5rem; } .stats-grid{ grid-template-columns:1fr 1fr; gap:1.6rem 1.2rem; } .footer-bottom{ flex-direction:column; align-items:flex-start; } .nav-inner .btn-nav{ display:none; } } /* ========================================================================== Contact page ========================================================================== */ .contact-hero{ padding:9.5rem 6vw 5rem; text-align:center; position:relative; overflow:hidden; background: radial-gradient(ellipse 65% 55% at 50% 0%, rgba(226,35,28,0.22), transparent 65%), radial-gradient(ellipse 45% 40% at 90% 100%, rgba(139,144,150,0.1), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 75%); } .contact-hero-grid{ position:absolute; inset:0; background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 72px); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 15%, black 20%, transparent 85%); mask-image:radial-gradient(ellipse 70% 60% at 50% 15%, black 20%, transparent 85%); } .contact-hero > *{ position:relative; z-index:1; } .contact-hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem, 6vw, 4.4rem); text-transform:uppercase; line-height:0.98; margin-bottom:1.1rem; } .contact-hero-sub{ color:var(--white-dim); font-size:1.05rem; max-width:30rem; margin:0 auto; } .contact-form-section{ padding:1rem 6vw 8rem; background:linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 65%); } .contact-form{ max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:1.6rem; background:var(--panel); border:1px solid var(--line); padding:2.8rem; } .form-row{ display:flex; flex-direction:column; gap:.6rem; } .form-row label{ font-family:var(--font-nav); font-weight:700; font-size:.78rem; letter-spacing:.01em; text-transform:uppercase; color:var(--white-dim); } .form-row input, .form-row textarea{ background:var(--bg); border:1px solid var(--line-strong); padding:.9rem 1rem; color:var(--white); font-family:var(--font-body); font-size:.96rem; transition:border-color .25s var(--ease); } .form-row input::placeholder, .form-row textarea::placeholder{ color:var(--steel-dim); } .form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--red); } .form-row textarea{ resize:vertical; min-height:140px; font-family:var(--font-body); } .contact-form .btn{ align-self:flex-start; } .contact-form .btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; } .form-honeypot{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; } .form-status{ font-family:var(--font-mono); font-size:.78rem; line-height:1.6; min-height:1.2em; } .form-status.success{ color:#4ade80; } .form-status.error{ color:var(--red-light); } @media (max-width:600px){ .contact-form{ padding:2rem 1.4rem; } } /* ========================================================================== Quote form page ========================================================================== */ .quote-section, .thankyou-section{ position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:8rem 6vw 5rem; overflow:hidden; } .quote-bg{ position:absolute; inset:0; background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(226,35,28,0.20), transparent 65%), radial-gradient(ellipse 45% 45% at 92% 100%, rgba(139,144,150,0.1), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 70%); } .quote-bg::after{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 72px); -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 20%, black 15%, transparent 80%); mask-image:radial-gradient(ellipse 75% 65% at 50% 20%, black 15%, transparent 80%); } .quote-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; pointer-events:none; filter:brightness(0.55) saturate(0.9); } .quote-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; background: radial-gradient(ellipse 70% 65% at 50% 45%, rgba(10,8,7,0.82), rgba(10,8,7,0.55) 70%, transparent), linear-gradient(180deg, rgba(10,8,7,0.85) 0%, rgba(10,8,7,0.5) 45%, rgba(10,8,7,0.8) 100%); } .quote-section.has-bg .quote-scrim{ opacity:1; } .quote-card{ position:relative; z-index:1; width:min(680px, 100%); background:var(--panel); border:1px solid var(--line-strong); padding:2.8rem; } .quote-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem, 4.4vw, 3rem); text-transform:uppercase; line-height:1; text-align:center; margin-bottom:.8rem; } .quote-lead{ text-align:center; color:var(--white-dim); font-size:.96rem; max-width:30rem; margin:0 auto 2.2rem; } /* Step progress */ .quote-progress{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin-bottom:2.4rem; } .qp-dot{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line-strong); font-family:var(--font-mono); font-size:.82rem; color:var(--steel-dim); transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .qp-dot.active{ background:var(--red); border-color:var(--red); color:#0a0a0a; font-weight:600; } .qp-line{ width:64px; height:1px; background:var(--line-strong); position:relative; overflow:hidden; } .qp-line::after{ content:""; position:absolute; inset:0; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); } .quote-progress.step2 .qp-line::after{ transform:scaleX(1); } /* Form layout */ .quote-form{ display:flex; flex-direction:column; } .quote-step{ border:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1.5rem; } .quote-step[hidden]{ display:none; } .form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; } .form-legend{ display:block; font-family:var(--font-nav); font-weight:700; font-size:.78rem; letter-spacing:.01em; text-transform:uppercase; color:var(--white-dim); margin-bottom:.9rem; } /* Select */ .quote-select{ appearance:none; -webkit-appearance:none; background:var(--bg); border:1px solid var(--line-strong); padding:.9rem 2.6rem .9rem 1rem; color:var(--white); font-family:var(--font-body); font-size:.96rem; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b9096' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; transition:border-color .25s var(--ease); } .quote-select:focus{ outline:none; border-color:var(--red); } .quote-select option{ background:var(--bg); color:var(--white); } /* Checkboxes */ .quote-checks{ display:flex; flex-direction:column; gap:.85rem; } .quote-checks .quote-check{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-body); font-size:.95rem; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--white); cursor:pointer; } .quote-check input{ position:absolute; opacity:0; width:0; height:0; } .check-box{ width:20px; height:20px; flex-shrink:0; border:1px solid var(--line-strong); background:var(--bg); position:relative; transition:background .2s var(--ease), border-color .2s var(--ease); } .check-box::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #0a0a0a; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .2s var(--ease); } .quote-check input:checked + .check-box{ background:var(--red); border-color:var(--red); } .quote-check input:checked + .check-box::after{ transform:rotate(45deg) scale(1); } .quote-check input:focus-visible + .check-box{ outline:2px solid var(--red); outline-offset:2px; } /* File upload */ .quote-file{ display:flex; align-items:stretch; border:1px solid var(--line-strong); background:var(--bg); } .quote-file-name{ flex:1; display:flex; align-items:center; padding:.9rem 1rem; font-size:.9rem; color:var(--steel-dim); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .quote-file-btn{ display:flex; align-items:center; gap:.5rem; padding:.9rem 1.3rem; background:var(--panel-2); border-left:1px solid var(--line-strong); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.03em; color:var(--white); cursor:pointer; white-space:nowrap; transition:background .25s var(--ease), color .25s var(--ease); } .quote-file-btn:hover{ background:var(--red); color:#0a0a0a; } /* Actions */ .quote-actions{ display:flex; margin-top:.6rem; } .quote-actions .btn{ width:100%; justify-content:center; } .quote-actions-split{ gap:1rem; } .quote-actions-split .btn{ flex:1; } .field-error{ border-color:var(--red) !important; } @media (max-width:560px){ .quote-card{ padding:2rem 1.4rem; } .form-grid-2{ grid-template-columns:1fr; } .quote-actions-split{ flex-direction:column-reverse; } } /* ========================================================================== Thank-you page ========================================================================== */ .thankyou-card{ position:relative; z-index:1; width:min(560px, 100%); text-align:center; } .thankyou-check{ width:76px; height:76px; margin:0 auto 2rem; color:var(--red-light); } .thankyou-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem, 5vw, 3.4rem); text-transform:uppercase; line-height:1; margin-bottom:1.2rem; } .thankyou-text{ color:var(--white-dim); font-size:1.02rem; max-width:30rem; margin:0 auto 2.2rem; } /* ========================================================================== Live motion layer — scroll progress, spotlights, tilt, click sparks ========================================================================== */ /* Reading-progress bar */ .scroll-progress{ position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg, var(--red), var(--red-light)); box-shadow:0 0 12px rgba(226,35,28,0.55); z-index:250; pointer-events:none; will-change:transform; } /* Cursor-follow spotlight on cards */ .project-card::after, .testimonial-card::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; mix-blend-mode:screen; background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,74,61,0.22), transparent 62%); transition:opacity .35s var(--ease); } .project-card:hover::after, .testimonial-card:hover::after{ opacity:1; } /* Outlined headings — slow living pulse */ .text-outline{ animation:outlinePulse 5.5s ease-in-out infinite; } @keyframes outlinePulse{ 0%,100%{ -webkit-text-stroke-color:var(--white-dim); } 50%{ -webkit-text-stroke-color:var(--steel); } } /* Click spark particles */ .click-spark{ position:fixed; width:5px; height:5px; border-radius:50%; background:var(--red-light); box-shadow:0 0 8px 1px rgba(255,74,61,0.8); pointer-events:none; z-index:260; will-change:transform, opacity; } .click-spark.white{ background:var(--white); box-shadow:0 0 6px 1px rgba(244,242,238,0.7); } @media (prefers-reduced-motion:reduce){ .text-outline{ animation:none; } .scroll-progress{ transition:none; } } @media (pointer:coarse){ .project-card{ transform:none; } }