/* Mike Schaeper Sand & Gravel LLC — shared stylesheet Design tokens + shared chrome (header/nav/footer) + motion. Fonts are loaded via in each page's , not @import. */ :root { /* palette */ --background: #f7f3ec; --foreground: #171412; --primary: #0f1626; --primary-foreground: #f4f1ea; --secondary: #e9e0d1; --accent: #e2641e; --accent-foreground: #ffffff; --muted-foreground: #6f6a62; --card: #ffffff; --border: rgba(20, 20, 20, 0.10); --input: #d9d3c7; /* gradients */ --gradient-ember: linear-gradient(135deg, #f08a1e 0%, #e2561b 100%); --gradient-sand: linear-gradient(90deg, #f2a24c 0%, #e2641e 60%, #d9531a 100%); --gradient-steel: linear-gradient(140deg, #33405a 0%, #141b2b 100%); /* shadows */ --shadow-glow: 0 12px 34px -10px rgba(226, 100, 30, 0.55); --shadow-elevated: 0 26px 50px -14px rgba(0, 0, 0, 0.40); /* type */ --font-display: "Anton", "Arial Narrow", sans-serif; --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --maxw: 80rem; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; line-height: 1.5; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.5rem; } /* ---- display headings (Anton, uppercase, condensed) ---- */ .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.95; letter-spacing: 0.005em; margin: 0; } .eyebrow { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: var(--accent); } /* outlined (stroke) text — visible outline, matches source */ .text-stroke { -webkit-text-stroke: 1.5px currentColor; color: transparent; } .text-stroke.on-dark { -webkit-text-stroke-color: var(--primary-foreground); } .text-stroke.on-light { -webkit-text-stroke-color: var(--primary); } /* gradient clip-text */ .grad-text { background: var(--gradient-sand); -webkit-background-clip: text; background-clip: text; color: transparent; } /* grain texture overlay */ .grain { position: absolute; inset: 0; pointer-events: none; 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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: 0.12; } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; font-weight: 600; cursor: pointer; border: none; transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .btn-ember { background: var(--gradient-ember); color: var(--accent-foreground); box-shadow: var(--shadow-glow); } .btn-ember:hover { transform: scale(1.03); } .btn-outline { border: 1px solid rgba(244, 241, 234, 0.3); color: var(--primary-foreground); background: transparent; } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .icon { width: 1rem; height: 1rem; flex: none; } .icon-arrow { transition: transform 0.2s ease; } .btn:hover .icon-arrow { transform: translateX(4px); } /* ---- header / nav ---- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid rgba(20, 20, 20, 0.08); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--maxw); margin-inline: auto; padding: 0.75rem 1.5rem; } .brand { display: inline-flex; align-items: center; gap: 0.75rem; } .brand-logo { height: 3rem; width: auto; } .brand-name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; line-height: 1.1; color: var(--primary); } .main-nav { display: none; align-items: center; gap: 2rem; font-size: 0.875rem; font-weight: 500; } .main-nav a { color: rgba(23, 20, 18, 0.8); transition: color 0.2s ease; } .main-nav a:hover { color: var(--accent); } .btn-call { padding: 0.55rem 1.25rem; font-size: 0.875rem; } .btn-call .call-short { display: inline; } .btn-call .call-full { display: none; } @media (min-width: 768px) { .main-nav { display: flex; } .btn-call .call-short { display: none; } .btn-call .call-full { display: inline; } } /* ---- footer ---- */ .site-footer { background: var(--primary); color: var(--primary-foreground); padding: 4rem 0; } .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } .footer-brand-row { display: flex; align-items: center; gap: 1rem; } .footer-logo-box { display: inline-block; border-radius: 0.75rem; background: rgba(244, 241, 234, 0.95); padding: 1rem; } .footer-logo-box img { height: 4rem; width: auto; } .footer-brand-name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; line-height: 1.1; } .footer-blurb { margin-top: 1rem; max-width: 28rem; font-size: 0.875rem; color: rgba(244, 241, 234, 0.7); } .footer-social { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .social-btn { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 9999px; border: 1px solid rgba(244, 241, 234, 0.15); color: rgba(244, 241, 234, 0.8); transition: color 0.2s ease, border-color 0.2s ease; } .social-btn:hover { border-color: var(--accent); color: var(--accent); } .footer-col-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); } .footer-list { margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; color: rgba(244, 241, 234, 0.7); } .footer-list li { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .footer-list.contact li { margin-bottom: 0.75rem; } .footer-list a:hover { color: var(--accent); } .footer-list .icon { color: var(--accent); } .footer-bottom { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(244, 241, 234, 0.1); padding-top: 1.5rem; font-size: 0.75rem; color: rgba(244, 241, 234, 0.5); } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } .footer-brand { grid-column: span 2; } } /* ---- motion: on-load reveals (always end visible via fill-mode both) ---- */ @keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .reveal { animation: fade-up 0.7s ease both; } .reveal-1 { animation-delay: 0.05s; } .reveal-2 { animation-delay: 0.15s; } .reveal-3 { animation-delay: 0.25s; } .reveal-4 { animation-delay: 0.35s; } .fade { animation: fade-in 0.9s ease both; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .fade { animation: none; } .btn, .icon-arrow, .service-media img { transition: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } } /* ===================================================================== page: index ===================================================================== */ main { display: block; } /* ---- hero ---- */ .hero { position: relative; min-height: 100vh; overflow: hidden; background: var(--primary); color: var(--primary-foreground); } .hero-media { position: absolute; inset: 0; } .hero-media video { height: 100%; width: 100%; object-fit: cover; } .hero-overlay-1 { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,22,38,0.55), rgba(15,22,38,0.65) 60%, var(--primary)); } .hero-overlay-2 { position: absolute; inset: 0; background: linear-gradient(to right, rgba(15,22,38,0.85), rgba(15,22,38,0.30) 50%, transparent); } .hero-inner { position: relative; z-index: 10; max-width: var(--maxw); margin-inline: auto; padding: 7rem 1.5rem 4rem; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content; border-radius: 9999px; border: 1px solid rgba(244, 241, 234, 0.2); background: rgba(244, 241, 234, 0.05); padding: 0.5rem 1rem; font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; backdrop-filter: blur(6px); } .hero-badge .icon { color: var(--accent); width: 0.9rem; height: 0.9rem; } .hero-title { margin-top: 1.5rem; max-width: 64rem; font-size: clamp(2.75rem, 8.5vw, 7.5rem); } .hero-sub { margin-top: 2rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.7; color: rgba(244, 241, 234, 0.75); } .hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .hero-actions .btn { padding: 1rem 2rem; font-size: 1rem; } .hero-trust { margin-top: 3.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; font-size: 0.875rem; color: rgba(244, 241, 234, 0.7); } .hero-trust .stars { display: flex; } .stars .icon { color: var(--accent); fill: var(--accent); } .hero-trust .divider { height: 1rem; width: 1px; background: rgba(244, 241, 234, 0.2); } .trust-inline { display: flex; align-items: center; gap: 0.5rem; } .hero-stats { position: relative; z-index: 10; border-top: 1px solid rgba(244, 241, 234, 0.1); background: rgba(15, 22, 38, 0.6); backdrop-filter: blur(6px); } .hero-stats-grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); } .hero-stats-grid > div { padding: 1.5rem; border-left: 1px solid rgba(244, 241, 234, 0.1); } .hero-stats-grid > div:first-child { border-left: none; } .stat-num { font-family: var(--font-display); font-size: 1.875rem; color: var(--accent); } .stat-label { margin-top: 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(244, 241, 234, 0.6); } @media (min-width: 768px) { .hero-stats-grid { grid-template-columns: repeat(4, 1fr); } .hero-stats-grid > div:nth-child(3) { border-left: 1px solid rgba(244, 241, 234, 0.1); } .stat-num { font-size: 2.25rem; } } @media (max-width: 767px) { .hero-stats-grid > div:nth-child(3) { border-left: none; } } /* ---- services ---- */ .services { position: relative; background: var(--background); padding: 7rem 0; } .section-head { max-width: 48rem; } .section-head h2 { margin-top: 1rem; font-size: clamp(2.5rem, 6vw, 4.5rem); } .section-head p { margin-top: 1.5rem; font-size: 1.125rem; color: var(--muted-foreground); } .service-grid { margin-top: 4rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; } .service-card { position: relative; overflow: hidden; border-radius: 1rem; background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-elevated); } .service-media { position: relative; height: 18rem; overflow: hidden; } .service-media img { height: 100%; width: 100%; object-fit: cover; transition: transform 0.7s ease; } .service-card:hover .service-media img { transform: scale(1.1); } .service-media .media-fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--primary), rgba(15,22,38,0.4) 40%, transparent); } .badge-most { position: absolute; right: 1rem; top: 1rem; border-radius: 9999px; background: var(--gradient-ember); padding: 0.25rem 0.75rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-foreground); } .service-body { padding: 2rem; } .service-body .row { display: flex; align-items: center; gap: 0.75rem; } .icon-box { display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 0.5rem; background: rgba(226, 100, 30, 0.15); color: var(--accent); } .icon-box .icon { width: 1.25rem; height: 1.25rem; } .service-body h3 { margin: 0; font-size: 1.25rem; font-weight: 700; } .service-body p { margin-top: 1rem; color: rgba(244, 241, 234, 0.7); } .chip-grid { margin-top: 3rem; display: grid; gap: 0.75rem; grid-template-columns: 1fr; } .chip { display: flex; align-items: center; gap: 1rem; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--card); padding: 1.25rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .chip:hover { border-color: var(--accent); box-shadow: 0 6px 18px -8px rgba(0,0,0,0.2); } .chip .icon-box { background: var(--secondary); color: var(--primary); } .chip span { font-size: 0.875rem; font-weight: 600; } @media (min-width: 768px) { .service-grid { grid-template-columns: repeat(2, 1fr); } .chip-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .chip-grid { grid-template-columns: repeat(4, 1fr); } } /* ---- about ---- */ .about { position: relative; overflow: hidden; background: var(--secondary); padding: 7rem 0; } .about-grid { position: relative; display: grid; gap: 4rem; grid-template-columns: 1fr; align-items: center; } .about-media { position: relative; } .about-media .frame { position: relative; overflow: hidden; border-radius: 1.5rem; box-shadow: var(--shadow-elevated); } .about-media .frame img { height: 100%; width: 100%; object-fit: cover; } .about-stat { position: absolute; bottom: -2rem; right: -1rem; display: none; border-radius: 1rem; background: var(--primary); color: var(--primary-foreground); padding: 2rem; box-shadow: var(--shadow-elevated); } .about-stat .num { font-family: var(--font-display); font-size: 3.75rem; color: var(--accent); line-height: 1; } .about-stat .lbl { margin-top: 0.25rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(244, 241, 234, 0.7); } .about-body h2 { margin-top: 1rem; font-size: clamp(2.5rem, 6vw, 3.75rem); } .about-body h2 .text-accent { color: var(--accent); -webkit-text-fill-color: var(--accent); } .about-body p { margin-top: 1.5rem; font-size: 1.125rem; color: var(--muted-foreground); } .about-body p + p { margin-top: 1rem; } .about-checklist { margin-top: 2rem; padding: 0; list-style: none; display: grid; gap: 0.75rem; grid-template-columns: 1fr; } .about-checklist li { display: flex; align-items: flex-start; gap: 0.75rem; } .about-checklist .icon { margin-top: 0.15rem; color: var(--accent); width: 1.25rem; height: 1.25rem; } .about-checklist span { font-size: 0.875rem; font-weight: 500; } @media (min-width: 640px) { .about-stat { display: block; } .about-checklist { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .about-grid { grid-template-columns: repeat(2, 1fr); } } /* ---- reviews ---- */ .reviews { position: relative; overflow: hidden; background: var(--primary); color: var(--primary-foreground); padding: 7rem 0; } .reviews .grain { opacity: 0.05; } .reviews-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; } .reviews-head .max { max-width: 42rem; } .reviews-head h2 { margin-top: 1rem; font-size: clamp(2.5rem, 6vw, 3.75rem); } .btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid rgba(244, 241, 234, 0.2); padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600; transition: border-color 0.2s ease, color 0.2s ease; } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-ghost .icon { color: var(--accent); fill: var(--accent); } .review-grid { position: relative; margin-top: 3.5rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; } .review-card { position: relative; border-radius: 1rem; border: 1px solid rgba(244, 241, 234, 0.1); background: rgba(244, 241, 234, 0.04); padding: 2rem; backdrop-filter: blur(6px); margin: 0; } .review-card .quote-icon { width: 2rem; height: 2rem; color: var(--accent); } .review-card .stars { margin-top: 0.75rem; display: flex; gap: 0.125rem; } .review-card blockquote { margin: 1rem 0 0; font-size: 1rem; line-height: 1.7; color: rgba(244, 241, 234, 0.9); } .review-card figcaption { margin-top: 1.5rem; border-top: 1px solid rgba(244, 241, 234, 0.1); padding-top: 1rem; } .review-card figcaption .name { font-weight: 600; } .review-card figcaption .meta { font-size: 0.875rem; color: rgba(244, 241, 234, 0.6); } @media (min-width: 768px) { .review-grid { grid-template-columns: repeat(3, 1fr); } } /* ---- contact ---- */ section.contact { position: relative; overflow: hidden; background: var(--background); padding: 7rem 0; } .contact-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; } .contact-info h2 { margin-top: 1rem; font-size: clamp(2.5rem, 6vw, 3.75rem); } .contact-info h2 .text-accent { color: var(--accent); -webkit-text-fill-color: var(--accent); } .contact-info p { margin-top: 1.5rem; font-size: 1.125rem; color: var(--muted-foreground); } .contact-cards { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .contact-card { display: flex; align-items: center; gap: 1rem; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--card); padding: 1.25rem; transition: border-color 0.2s ease; } .contact-card:hover { border-color: var(--accent); } .contact-card .cc-icon { display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: 0.5rem; flex: none; } .contact-card .cc-icon.ember { background: var(--gradient-ember); color: var(--accent-foreground); } .contact-card .cc-icon.steel { background: var(--secondary); color: var(--primary); } .contact-card .cc-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted-foreground); } .contact-card .cc-big { font-family: var(--font-display); font-size: 1.5rem; } .contact-card .cc-val { font-weight: 600; } .contact-card .icon-arrow { margin-left: auto; color: var(--muted-foreground); } .contact-card:hover .icon-arrow { color: var(--accent); } .form-frame { border-radius: 1.5rem; background: var(--gradient-steel); padding: 4px; box-shadow: var(--shadow-elevated); } .form-inner { border-radius: calc(1.5rem - 4px); background: var(--card); padding: 2rem; } .quote-form { display: flex; flex-direction: column; gap: 1.25rem; } .quote-form h3 { margin: 0; font-family: var(--font-display); font-size: 1.75rem; text-transform: uppercase; } .form-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } .field label { margin-bottom: 0.5rem; display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted-foreground); } .field input, .field select, .field textarea { width: 100%; border-radius: 0.75rem; border: 1px solid var(--input); background: var(--background); padding: 0.75rem 1rem; font-size: 0.875rem; font-family: inherit; color: var(--foreground); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(226, 100, 30, 0.2); } .field textarea { resize: vertical; } .hp-wrap { position: absolute; left: -9999px; overflow: hidden; height: 0; width: 0; } .form-submit { width: 100%; justify-content: center; padding: 1rem 2rem; font-size: 1rem; font-weight: 700; } .form-note { text-align: center; font-size: 0.75rem; color: var(--muted-foreground); margin: 0; } @media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .contact-grid { grid-template-columns: 2fr 3fr; } }