/* ========================================================================== Roy's Sealcoating — single stylesheet No inline styles anywhere on the site; everything lives here. Design direction ---------------- Subject: driveway sealcoating + crack filling. The material itself — fresh asphalt sealer — is deep matte black with a faint sheen, edged by the crisp painted line of a finished driveway. That's the palette: near-black asphalt fields, graphite surfaces, a single safety-yellow line (sampled from the logo: #FAD92C) used like fresh paint on new pavement. Type: Anton (or a heavy condensed grotesque) for the display wordmark voice that echoes the logo's compressed caps; Barlow for body/UI — an industrial, signage-derived face that suits the trade without feeling corporate. Loaded in per page. Signature: the "wet-line" — a yellow rule with a soft glow that behaves like a freshly painted lane stripe, used to underline section eyebrows and the active nav item. One bold move, kept consistent. ========================================================================== */ /* ----- Design tokens ----------------------------------------------------- */ :root { /* Color — sampled from the logo file */ --c-asphalt: #0a0a0b; /* page background, deepest field */ --c-asphalt-2: #121214; /* raised section background */ --c-graphite: #1b1c1f; /* cards / surfaces */ --c-graphite-2: #26282c; /* hover surfaces, borders */ --c-line: #34363b; /* hairline dividers */ --c-silver: #acaead; /* logo gray — primary text on dark */ --c-silver-dim: #8a8c8e; /* secondary text */ --c-white: #f4f5f6; /* high-emphasis headings */ --c-yellow: #fad92c; /* the safety line — accent */ --c-yellow-deep: #e0bd1f; /* pressed / darker accent */ --c-on-yellow: #14130a; /* text on a yellow fill */ /* Type */ --f-display: "Anton", "Arial Narrow", sans-serif; --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-eyebrow: 0.78rem; --fs-body: 1.05rem; --fs-lead: 1.2rem; --fs-h3: clamp(1.25rem, 2.5vw, 1.6rem); --fs-h2: clamp(1.9rem, 4.5vw, 3rem); --fs-h1: clamp(2.8rem, 8vw, 6rem); /* Spacing scale */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem; /* Structure */ --maxw: 1180px; --maxw-narrow: 760px; --radius: 4px; --radius-lg: 8px; --gutter: clamp(1.25rem, 5vw, 3rem); /* Motion */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur: 0.45s; } /* ----- Reset / base ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--c-asphalt); color: var(--c-silver); font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--c-yellow); text-decoration: none; } a:hover { color: var(--c-yellow-deep); } h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.02; letter-spacing: 0.01em; color: var(--c-white); text-transform: uppercase; margin: 0 0 var(--s-4); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: 0.02em; } p { margin: 0 0 var(--s-4); } p:last-child { margin-bottom: 0; } /* Visible keyboard focus everywhere */ :focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; } /* Skip link for keyboard / screen-reader users */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-yellow); color: var(--c-on-yellow); padding: var(--s-3) var(--s-4); font-family: var(--f-body); font-weight: 600; z-index: 200; } .skip-link:focus { left: var(--s-3); top: var(--s-3); } /* ----- Layout helpers ---------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--maxw-narrow); } .section { padding-block: clamp(2.5rem, 5vw, 4rem); } .section--tight { padding-block: clamp(1.5rem, 3vw, 2.25rem); } .section--alt { background: var(--c-asphalt-2); } /* The signature "wet-line" eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--f-body); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-silver-dim); margin-bottom: var(--s-4); } .eyebrow::before { content: ""; width: 38px; height: 3px; background: var(--c-yellow); box-shadow: 0 0 12px rgba(250, 217, 44, 0.55); } .lead { font-size: var(--fs-lead); color: var(--c-silver); } /* ----- Buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: var(--f-body); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.04em; text-transform: uppercase; padding: var(--s-3) var(--s-6); border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: transform var(--dur) var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--c-yellow); color: var(--c-on-yellow); } .btn--primary:hover { background: var(--c-yellow-deep); color: var(--c-on-yellow); } .btn--ghost { border-color: var(--c-graphite-2); color: var(--c-white); background: transparent; } .btn--ghost:hover { border-color: var(--c-yellow); color: var(--c-yellow); } /* ----- Top utility bar --------------------------------------------------- */ .topbar { background: var(--c-asphalt-2); border-bottom: 1px solid var(--c-line); font-family: var(--f-body); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); } .topbar__phone { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-yellow); font-weight: 700; font-size: 0.85rem; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; } .topbar__phone:hover { color: var(--c-white); } .topbar__phone svg { width: 15px; height: 15px; fill: currentColor; } .topbar__meta { color: var(--c-silver-dim); font-size: 0.8rem; letter-spacing: 0.04em; line-height: 1; } @media (max-width: 560px) { .topbar__meta { display: none; } .topbar__inner { justify-content: center; } } /* ----- Header / nav ------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(10, 10, 11, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 76px; max-width: 1340px; } .site-logo { display: inline-flex; align-items: center; margin-right: auto; } .site-logo img { height: 38px; width: auto; } .site-header__actions { display: flex; align-items: center; gap: var(--s-3); } /* Facebook (and any future social) icon button — always visible */ .site-social { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid var(--c-graphite-2); color: var(--c-silver); transition: color 0.2s, border-color 0.2s, background-color 0.2s; } .site-social:hover { color: var(--c-yellow); border-color: var(--c-yellow); } .site-social svg { width: 20px; height: 20px; fill: currentColor; display: block; } .nav { display: flex; align-items: center; gap: var(--s-1); } .nav a { font-family: var(--f-body); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-silver); padding: var(--s-2) var(--s-2); border-radius: var(--radius); position: relative; white-space: nowrap; } .nav a:hover { color: var(--c-white); } .nav a[aria-current="page"] { color: var(--c-white); } .nav a[aria-current="page"]::after { content: ""; position: absolute; left: var(--s-2); right: var(--s-2); bottom: -2px; height: 3px; background: var(--c-yellow); box-shadow: 0 0 10px rgba(250, 217, 44, 0.6); } .nav .btn { margin-left: var(--s-2); white-space: nowrap; font-size: 0.86rem; padding: var(--s-3) var(--s-4); } /* Mobile nav toggle */ .nav-toggle { display: none; background: transparent; border: 1px solid var(--c-graphite-2); border-radius: var(--radius); width: 46px; height: 46px; cursor: pointer; padding: 0; align-items: center; justify-content: center; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 22px; height: 2px; background: var(--c-white); position: relative; transition: transform 0.25s var(--ease), opacity 0.25s; } .nav-toggle span::before { position: absolute; top: -7px; } .nav-toggle span::after { position: absolute; top: 7px; } @media (max-width: 1024px) { .nav-toggle { display: inline-flex; } .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--c-asphalt-2); border-bottom: 1px solid var(--c-line); padding: var(--s-4) var(--gutter) var(--s-6); transform: translateY(-120%); transition: transform 0.3s var(--ease); } .nav[data-open="true"] { transform: translateY(0); } .nav a { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); font-size: 0.95rem; } .nav a[aria-current="page"]::after { display: none; } .nav .btn { margin: var(--s-4) 0 0; font-size: 0.95rem; } } /* ----- Hero -------------------------------------------------------------- */ .hero { position: relative; padding-block: clamp(3rem, 7vw, 5.5rem); overflow: hidden; background: radial-gradient(120% 100% at 80% -10%, rgba(250, 217, 44, 0.07), transparent 60%), var(--c-asphalt); } /* The painted lane-stripe motif running through the hero */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient( 90deg, var(--c-yellow) 0, var(--c-yellow) 60px, transparent 60px, transparent 110px ); opacity: 0.85; } .hero h1 { max-width: 14ch; } .hero .lead { max-width: 52ch; margin-top: var(--s-5); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-7); } .hero__actions--center { justify-content: center; } /* Optional hero background image (no inline styles — uses an + overlay) */ .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero--image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, 0.74), rgba(10, 10, 11, 0.84)); z-index: 1; } .hero--image::after { z-index: 2; } .hero__content { position: relative; z-index: 2; } /* Featured image band (About / Services / Commercial) */ .featured-img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--c-line); } /* ----- Cards / grids ----------------------------------------------------- */ .grid { display: grid; gap: var(--s-5); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 860px) { .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } } .card { background: var(--c-graphite); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--s-6); transition: border-color 0.25s, transform var(--dur) var(--ease); } .card:hover { border-color: var(--c-graphite-2); transform: translateY(-3px); } .card h3 { margin-bottom: var(--s-3); } /* Clickable card (home service teasers) */ .card--link { display: block; color: inherit; } .card--link:hover { border-color: var(--c-yellow); color: inherit; } .card__cta { display: inline-block; margin-top: var(--s-4); font-family: var(--f-body); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-yellow); } .card__num { font-family: var(--f-display); font-size: 1.1rem; color: var(--c-yellow); letter-spacing: 0.1em; } /* ----- Rich-text content (from the CMS) ---------------------------------- */ .rte > :first-child { margin-top: 0; } .rte h2 { margin-top: var(--s-7); } .rte h3 { margin-top: var(--s-6); } .rte ul, .rte ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); } .rte li { margin-bottom: var(--s-2); } .rte a { text-decoration: underline; } .rte strong { color: var(--c-white); } /* ----- FAQ --------------------------------------------------------------- */ .faq-item { border-bottom: 1px solid var(--c-line); padding: var(--s-5) 0; } .faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); font-family: var(--f-body); font-weight: 600; font-size: var(--fs-h3); color: var(--c-white); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--f-display); color: var(--c-yellow); font-size: 1.5rem; transition: transform 0.25s var(--ease); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item__body { padding-top: var(--s-4); color: var(--c-silver); } /* ----- Gallery (before / after) ------------------------------------------ */ .ba-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, 1fr); } @media (max-width: 860px) { .ba-grid { grid-template-columns: 1fr; } } .ba-pair { background: var(--c-graphite); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; } .ba-pair__imgs { display: grid; grid-template-columns: 1fr 1fr; } .ba-pair__imgs figure { margin: 0; position: relative; } .ba-pair__imgs img { width: 100%; height: 220px; object-fit: cover; } .ba-pair__imgs figcaption { position: absolute; top: var(--s-3); left: var(--s-3); background: var(--c-asphalt); color: var(--c-yellow); font-family: var(--f-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; padding: var(--s-1) var(--s-3); border-radius: var(--radius); } .ba-pair__caption { padding: var(--s-4) var(--s-5); color: var(--c-silver-dim); font-size: 0.95rem; } /* ----- Estimate (embedded Google Form) ----------------------------------- */ .form-embed { background: var(--c-graphite); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--s-3); overflow: hidden; } .form-embed iframe { width: 100%; min-height: 1300px; border: 0; border-radius: var(--radius); background: #fff; } /* ----- Contact ----------------------------------------------------------- */ .contact-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr 1fr; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } .contact-line { display: flex; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); } .contact-line__label { font-family: var(--f-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--c-silver-dim); min-width: 110px; } /* Areas served — multi-column town list */ .areas-list { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: var(--s-6); } .areas-list li { padding: var(--s-1) 0; color: var(--c-silver-dim); break-inside: avoid; font-size: 0.95rem; } @media (max-width: 860px) { .areas-list { columns: 2; } } @media (max-width: 480px) { .areas-list { columns: 1; } } /* ----- CTA band ---------------------------------------------------------- */ .cta-band { background: linear-gradient(0deg, rgba(250, 217, 44, 0.06), rgba(250, 217, 44, 0.06)), var(--c-asphalt-2); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); text-align: center; } .cta-band h2 { margin-bottom: var(--s-5); } /* ----- Footer ------------------------------------------------------------ */ .site-footer { background: var(--c-asphalt); border-top: 1px solid var(--c-line); padding-block: var(--s-7) var(--s-6); color: var(--c-silver-dim); font-size: 0.92rem; } .site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); margin-bottom: var(--s-7); } @media (max-width: 860px) { .site-footer__top { grid-template-columns: 1fr; gap: var(--s-5); } } .site-footer img { height: 34px; width: auto; margin-bottom: var(--s-4); } .site-footer h4 { font-family: var(--f-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--c-silver); margin: 0 0 var(--s-4); } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: var(--s-2); } .site-footer a { color: var(--c-silver-dim); } .site-footer a:hover { color: var(--c-yellow); } .site-footer__bar { border-top: 1px solid var(--c-line); padding-top: var(--s-5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); font-size: 0.85rem; } /* ----- Utilities --------------------------------------------------------- */ .stack-sm > * + * { margin-top: var(--s-3); } .stack > * + * { margin-top: var(--s-5); } .text-center { text-align: center; } .mt-6 { margin-top: var(--s-6); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }