/* ========================================================================== Michael A. Roberts Construction — "Steel & Asphalt" theme Self-contained stylesheet. No external assets required. ========================================================================== */ :root { /* Brand / palette */ --crimson: #F83F3F; /* canonical logo red — CTAs, active states, accents only */ --crimson-dark: #D92F2F; --navy: #0F172A; /* foundation anchor — headers, dark sections */ --navy-2: #1E293B; /* raised navy surfaces */ --slate: #64748B; /* secondary text, borders, metadata */ --slate-light: #94A3B8; --alabaster: #F8FAFC; /* page canvas */ --white: #FFFFFF; --line: #E2E8F0; /* hairline borders on light surfaces */ /* Status colors */ --status-bid: #F83F3F; /* Active Bidding */ --status-build: #0EA5E9; /* Under Construction */ --status-arch: #64748B; /* Archived */ --radius: 14px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08); --shadow-lg:0 12px 40px rgba(15,23,42,.18); --maxw: 1180px; --font-display: "Anton", "Oswald", system-ui, sans-serif; /* heavy condensed — big statements */ --font-head: "Oswald", "Barlow Condensed", system-ui, sans-serif; /* industrial headings/nav/buttons */ --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scrollbar-width: none; /* Firefox: hide scrollbar without disabling scroll */ -ms-overflow-style: none; /* Legacy Edge/IE */ } html.no-smooth-scroll { scroll-behavior: auto; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; } .overlay-scrollbar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000; width: 22px; background: transparent; pointer-events: auto; touch-action: none; } .overlay-scrollbar__thumb { position: absolute; top: 0; right: 5px; width: 7px; min-height: 48px; border-radius: 999px; background: var(--crimson); box-shadow: 0 0 0 1px rgba(0,0,0,.24), 0 8px 18px rgba(0,0,0,.28); opacity: 0; transform: translateY(0); will-change: transform, opacity; transition: opacity .42s ease, width .22s ease, right .22s ease; } .overlay-scrollbar.is-visible .overlay-scrollbar__thumb, .overlay-scrollbar.is-dragging .overlay-scrollbar__thumb { opacity: .95; } .overlay-scrollbar:hover .overlay-scrollbar__thumb, .overlay-scrollbar.is-dragging .overlay-scrollbar__thumb { right: 4px; width: 9px; } body { margin: 0; font-family: var(--font-body); color: var(--navy); background: var(--alabaster); -webkit-font-smoothing: antialiased; line-height: 1.55; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* Blueprint background pattern (pure CSS, no image files) ------------------- */ .blueprint { background-color: var(--navy); background-image: linear-gradient(rgba(148,163,184,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.10) 1px, transparent 1px), linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; background-position: -1px -1px; } /* "Asphalt" black theme — index overrides the navy foundation. Plan Room deliberately KEEPS navy: blueprint-room vibe + showcases theme switching. */ body.blk { --navy: #0B0D11; --navy-2: #15181E; } body.blk .nav { background: rgba(10,12,16,.92); } body.blk .hero { background: linear-gradient(rgba(11,13,17,.55), rgba(11,13,17,.80)); } /* ============================ Top nav ===================================== */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(15,23,42,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(148,163,184,.18); } .nav .container { display: flex; align-items: center; justify-content: space-between; height: 76px; } .nav__links { display: flex; align-items: center; gap: 26px; } .nav__links a { color: var(--slate-light); font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: color .15s ease; } .nav__links a:hover { color: var(--white); } .nav__links a.is-active { color: var(--white); } .nav__cta { background: var(--crimson); color: var(--white) !important; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; } .nav__cta:hover { background: var(--crimson-dark); } /* Plan Room header button — outline style so it doesn't compete with the red Contact */ .nav__links a.nav__cta--plan { background: transparent; border-color: rgba(148,163,184,.55); } .nav__links a.nav__cta--plan:hover { background: rgba(255,255,255,.08); border-color: var(--white); } /* Centered logo lockup (text-based placeholder mark) ----------------------- */ .logo { display: flex; align-items: center; gap: 12px; } .logo__mark { height: 48px; width: auto; display: block; } .logo__text { display: flex; flex-direction: column; line-height: 1.05; } .logo__text .l1 { font-family: var(--font-head); font-weight: 800; color: var(--white); letter-spacing: .14em; font-size: 15px; } .logo__text .l2 { color: var(--slate-light); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; } /* ============================ Hero ======================================== */ /* Crane image is a FIXED rear layer (z-index -1); the whole site scrolls on top of it */ .site-bg { position: fixed; top: 0; left: 0; right: 0; z-index: -1; height: 100vh; /* fallback */ height: 100lvh; /* large viewport height — sized to toolbar-hidden state so it never snap-zooms */ background: var(--navy); overflow: hidden; } /* Solid cover that fades out once the first slide image has loaded — prevents the bg "popping in" whenever the network finishes the download */ .site-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--navy); opacity: 1; /* hold the solid black a beat (.7s) before the slow reveal — logo-on-black first, then the world fades in: simple → complex, like the build itself */ transition: opacity 5s ease 1.3s; pointer-events: none; } .site-bg.ready::after { opacity: 0; } /* Cinematic crossfade slideshow with slow Ken Burns */ .bg-slide { position: absolute; inset: 0; background-size: cover; background-position: center 32%; opacity: 0; will-change: opacity, transform; animation: heroSlides 32s linear infinite; } .bg-slide:nth-child(1) { animation-delay: -2s; } .bg-slide:nth-child(2) { animation-delay: 6s; } .bg-slide:nth-child(3) { animation-delay: 14s; } .bg-slide:nth-child(4) { animation-delay: 22s; } @keyframes heroSlides { 0% { opacity: 0; transform: scale(1.03); } 5% { opacity: 1; } 28% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; transform: scale(1.13); } } /* Hero is transparent so the fixed crane shows through; gradient just darkens it for text */ .hero { color: var(--white); position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; background: linear-gradient(rgba(15,23,42,.55), rgba(15,23,42,.80)); } .hero::after { content:""; position:absolute; inset:0; /* kept faint (≤.10) — stronger crimson over the navy/photo blend reads magenta */ background: radial-gradient(120% 80% at 50% -10%, rgba(248,63,63,.09), transparent 60%); pointer-events:none; } .hero .container { position: relative; z-index: 1; text-align: center; } .hero .eyebrow { color: var(--white); } .hero__badge { width: min(400px, 84%); height: auto; display: block; margin: 0 auto 30px; filter: drop-shadow(0 12px 30px rgba(0,0,0,.4)); } .tagline { font-family: var(--font-head); font-style: italic; font-weight: 700; color: var(--white); font-size: clamp(17px, 2.6vw, 24px); margin: 0 0 22px; letter-spacing: .01em; } .tagline::first-letter { color: var(--crimson); } .eyebrow { display: inline-block; color: var(--crimson); font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 18px; } .hero h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 7.5vw, 80px); line-height: .96; margin: 0 0 18px; letter-spacing: .005em; } .hero h1 .accent { color: var(--crimson); } .hero-h1 .line { display: block; opacity: 0; transform: translateY(30px); animation: lineUp .85s cubic-bezier(.2,.7,.2,1) forwards; } .hero-h1 .line:nth-child(1) { animation-delay: .15s; } .hero-h1 .line:nth-child(2) { animation-delay: .32s; } @keyframes lineUp { to { opacity: 1; transform: none; } } .hero p.lead { color: var(--slate-light); font-size: clamp(15px, 2.2vw, 19px); max-width: 620px; margin: 0 auto 34px; } .hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: .03em; padding: 14px 24px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: all .15s ease; } .btn { text-transform: uppercase; letter-spacing: .06em; } .btn--primary { background: var(--crimson); color: var(--white); box-shadow: 0 10px 24px rgba(248,63,63,.32); } .btn--primary:hover { background: var(--crimson-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(248,63,63,.42); } .btn--ghost { background: transparent; color: var(--white); border-color: rgba(148,163,184,.45); } .btn--ghost:hover { border-color: var(--white); } /* Trust strip -------------------------------------------------------------- */ .trust { background: var(--navy-2); border-top: 1px solid rgba(148,163,184,.14); } .trust .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; padding: 40px 24px; text-align: center; } .trust .stat .num { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 60px); color: var(--white); line-height: 1; } .trust .stat .num .u { color: var(--crimson); } /* suffix accent */ .trust .stat .lbl { color: var(--slate-light); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; } /* ============================ Plan Room =================================== */ .pr-hero { color: var(--white); padding: 64px 0 28px; text-align: center; } .pr-hero h1 { font-family: var(--font-head); font-weight: 800; letter-spacing: .02em; font-size: clamp(28px, 5vw, 48px); margin: 18px 0 12px; } .pr-hero p { color: var(--slate-light); max-width: 560px; margin: 0 auto; font-size: clamp(14px, 2vw, 16px); } /* Plan Room title pill — brand palette (white on navy, crimson dot) */ .pr-hero .pr-pill { display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); color: var(--white); border: 1px solid rgba(148,163,184,.45); font-family: var(--font-head); font-weight: 700; font-size: clamp(18px, 4.2vw, 26px); letter-spacing: .12em; text-transform: uppercase; padding: 12px 30px; border-radius: 999px; margin: 4px 0 14px; line-height: 1; } /* Toolbar: search + filter chips ------------------------------------------ */ .pr-toolbar { position: sticky; top: 76px; z-index: 40; background: var(--alabaster); border-bottom: 1px solid var(--line); padding: 18px 0; } .pr-toolbar .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .search { flex: 1 1 320px; position: relative; } .search input { width: 100%; height: 50px; border: 1px solid var(--line); background: var(--white); border-radius: var(--radius-sm); padding: 0 16px 0 46px; font-size: 15px; font-family: var(--font-body); color: var(--navy); box-shadow: var(--shadow); outline: none; transition: border-color .15s ease; } .search input:focus { border-color: var(--crimson); } .search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--slate); } .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { font-family: var(--font-head); font-weight: 600; font-size: 13px; padding: 10px 16px; border-radius: 999px; cursor: pointer; background: var(--white); color: var(--slate); border: 1px solid var(--line); transition: all .15s ease; white-space: nowrap; } .chip:hover { border-color: var(--slate); color: var(--navy); } .chip.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); } /* Job grid ---------------------------------------------------------------- */ .pr-grid { padding: 32px 0 80px; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .card:hover .card__photo { transform: scale(1.07); } .card__media { height: 152px; position: relative; overflow: hidden; background-color: var(--navy); background-image: linear-gradient(135deg, rgba(248,63,63,.20), rgba(15,23,42,.0) 55%), linear-gradient(rgba(148,163,184,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.16) 1px, transparent 1px); background-size: cover, 22px 22px, 22px 22px; } .card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .5s ease; } .card__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(15,23,42,.66), rgba(15,23,42,.05) 62%); } .card__media .status, .card__media .jobno { z-index: 2; } .card__media .jobno { position: absolute; left: 16px; bottom: 12px; font-family: var(--font-head); font-weight: 800; color: var(--white); font-size: 13px; letter-spacing: .14em; opacity: .9; } .status { position: absolute; top: 14px; right: 14px; font-family: var(--font-head); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; color: var(--white); display: inline-flex; align-items: center; gap: 6px; } .status::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; } .status--bid { background: var(--status-bid); } .status--build { background: var(--status-build); } .status--arch { background: var(--status-arch); } .card__body { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .card__title { font-family: var(--font-head); font-weight: 800; font-size: 18px; margin: 0; letter-spacing: -.01em; } .card__meta { color: var(--slate); font-size: 12.5px; display: flex; gap: 14px; flex-wrap: wrap; margin-top: -6px; } .card__meta b { color: var(--navy); font-weight: 600; } .folders { display: flex; flex-direction: column; gap: 2px; } .folder { display: flex; align-items: center; gap: 10px; width: 100%; background: none; font: inherit; text-align: left; /*