/* Theme Name: Onyx General Construction Theme URI: https://onyxgeneralconstruction.com Author: Onyx General Construction Description: Lean custom theme for Onyx General Construction. Fast, clean HTML, full control, no page-builder bloat. The shared design system for every page (hero shells, cards, FAQ grids, process steps, etc.) lives here, so page content can be pasted as plain body HTML and render styled automatically. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: onyx */ /* ===================================================================== DESIGN TOKENS ===================================================================== */ :root{ --bg:#f6f4ef; --surface:rgba(255,255,255,0.92); --surface-2:#efebe3; --text:#171717; --muted:#5d5d5d; --line:rgba(23,23,23,0.08); --accent:#b4b087; --accent-dark:#8f8a60; --shadow:0 14px 36px rgba(0,0,0,0.08); --radius-xl:30px; --radius-lg:20px; --radius-md:14px; --max:1280px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:"Inter","Helvetica Neue",Arial,sans-serif; color:var(--text); background: radial-gradient(circle at top left, rgba(180,176,135,0.18), transparent 26%), linear-gradient(180deg,#fbf9f4 0%,var(--bg) 100%); line-height:1.65; } img,video{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} .container{width:min(calc(100% - 40px),var(--max));margin:0 auto;} section{padding:34px 0;} h1,h2,h3{letter-spacing:-0.03em;} h1{margin:0 0 16px;font-size:clamp(2.4rem,4.8vw,4.4rem);line-height:1;letter-spacing:-0.045em;} h2{margin:0 0 10px;} h3{margin:0 0 10px;font-size:1.05rem;} .skip-link{position:absolute;left:-9999px;top:0;} .skip-link:focus{left:12px;top:12px;z-index:200;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);} /* ===================================================================== SITE HEADER / NAV (theme chrome) ===================================================================== */ .site-header{position:sticky;top:0;z-index:60;background:rgba(251,249,244,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);} .nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:66px;} .logo{display:flex;flex-direction:column;line-height:1;font-weight:800;letter-spacing:1px;color:var(--text);font-size:1.2rem;} .logo span{font-size:.58rem;letter-spacing:3px;color:var(--accent-dark);font-weight:700;margin-top:4px;} .main-nav{display:flex;align-items:center;gap:24px;} .nav-list{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0;} .nav-list a{color:var(--text);font-size:.95rem;font-weight:500;} .nav-list a:hover{color:var(--accent-dark);} .nav-cta{background:var(--text);color:#fff!important;padding:10px 16px;border-radius:999px;font-weight:600;font-size:.92rem;} .nav-cta:hover{opacity:.85;} .nav-toggle,.nav-burger{display:none;} /* ===================================================================== ELEMENTS / EYEBROWS / LABELS ===================================================================== */ .eyebrow,.section-label,.feature-eyebrow,.phase-kicker{ display:inline-flex;align-items:center;gap:10px;width:fit-content; padding:8px 14px;border-radius:999px;background:rgba(180,176,135,0.16); color:var(--accent-dark);font-size:0.82rem;font-weight:700; letter-spacing:0.08em;text-transform:uppercase;margin-bottom:16px; } .kicker,.location-line{ display:inline-flex;align-items:center;gap:8px;margin-bottom:10px; padding:8px 12px;border-radius:999px;background:var(--surface-2); color:#3f3f3f;font-size:0.84rem;font-weight:600; } .phase-chip{ display:inline-block;padding:3px 10px;border-radius:999px; background:rgba(180,176,135,0.2);color:var(--accent-dark); font-size:0.74rem;font-weight:700;letter-spacing:0.08em; text-transform:uppercase;margin-bottom:12px; } /* ===================================================================== BUTTONS ===================================================================== */ .btn{ min-height:48px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center; border-radius:999px;font-weight:600;font-size:0.95rem;cursor:pointer; border:1px solid transparent;transition:0.2s ease; } .btn-primary{background:var(--text);color:#fff;} .btn-primary:hover{opacity:0.85;} .btn-secondary{background:rgba(255,255,255,0.8);border-color:var(--line);color:var(--text);} .btn-secondary:hover{background:#fff;border-color:rgba(180,176,135,0.6);} .btn-light,.cta-box .btn-light{background:#fff;color:#111;white-space:nowrap;min-height:48px;padding:0 22px;display:inline-flex;align-items:center;border-radius:999px;font-weight:600;border:none;transition:0.2s ease;} .btn-light:hover{opacity:0.88;} .cta-row{display:flex;flex-wrap:wrap;gap:12px;} /* ===================================================================== HERO ===================================================================== */ .hero{padding:0 0 34px;} .hero-shell{ background:linear-gradient(135deg,rgba(255,255,255,0.93),rgba(240,236,227,0.93)); border:1px solid rgba(255,255,255,0.7);border-radius:38px;overflow:hidden;box-shadow:var(--shadow); } .hero-grid{display:grid;grid-template-columns:1.12fr 0.88fr;min-height:520px;} .hero-copy{padding:56px 52px 48px;display:flex;flex-direction:column;justify-content:center;} .hero-copy h1{max-width:12ch;} .hero-copy p{margin:0 0 24px;max-width:60ch;color:var(--muted);font-size:1.06rem;} .hero-visual{position:relative;min-height:100%;background:var(--surface-2) center/cover no-repeat;} .hero-note{position:absolute;left:24px;right:24px;bottom:24px;padding:18px;border-radius:18px;background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,0.12);} .hero-note strong{display:block;margin-bottom:4px;font-size:0.96rem;} .hero-note span{color:var(--muted);font-size:0.92rem;} .pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;} .pill{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,0.72);border:1px solid rgba(23,23,23,0.07);font-size:0.9rem;} /* ===================================================================== SECTION HEADS ===================================================================== */ .section-head{margin-bottom:24px;} .section-head h2{font-size:clamp(1.7rem,3vw,2.7rem);} .section-head p{margin:0;color:var(--muted);max-width:70ch;font-size:0.97rem;} .center{text-align:center;} .lead{font-size:1.1rem;color:var(--text);} /* ===================================================================== GENERIC GRIDS ===================================================================== */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;} .four-col{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;} .intro-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:18px;margin-top:12px;} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:24px;} /* ===================================================================== CARDS (shared base) ===================================================================== */ .card,.intro-card,.summary-card,.faq-card,.resource-card,.step,.step-card,.fit-card,.service-card,.stat-card,.note-band{ background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow); } .card,.intro-card,.faq-card,.resource-card,.step,.step-card,.fit-card,.service-card,.summary-card,.note-band{ border-radius:var(--radius-lg);padding:24px 26px; } .card h3,.intro-card h3,.faq-card strong,.resource-card h3,.step h3,.step-card h3,.fit-card h3,.service-card h3,.summary-card h3,.note-band h3{ margin:0 0 10px;font-size:1.06rem;color:var(--text);display:block; } .card p,.intro-card p,.faq-card p,.resource-card p,.step p,.step-card p,.fit-card p,.service-card p,.summary-card p,.note-band p{ margin:0;color:var(--muted);font-size:0.93rem; } .card p + p{margin-top:10px;} /* dark note band */ .note-band{background:linear-gradient(135deg,#1c1c1c,#2b2b2b);color:#fff;border-radius:var(--radius-xl);padding:30px;} .note-band p{color:rgba(255,255,255,0.72);} /* ===================================================================== STEP / PROCESS ===================================================================== */ .process,.process-grid,.step-grid{display:grid;gap:16px;} .process,.step-grid{grid-template-columns:repeat(3,minmax(0,1fr));} .process-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .process-step{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius-lg);padding:24px;} .process-step h3{margin:0 0 10px;font-size:1.08rem;} .process-step p{margin:0 0 10px;color:var(--muted);} .process-step p:last-child{margin:0;} .step-number,.step-num,.summary-card small,.phase-count{ width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center; border-radius:50%;background:rgba(180,176,135,0.18);color:var(--accent-dark); font-weight:700;font-size:0.9rem;margin-bottom:14px; } .summary-card small{margin-bottom:14px;} /* ===================================================================== SERVICE / FIT / SUMMARY / GLANCE / STAT GRIDS ===================================================================== */ .service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;} .service-icon{width:40px;height:40px;border-radius:50%;background:rgba(180,176,135,0.18);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--accent-dark);font-size:1.1rem;} .fit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;} .summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;} .glance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px;} .glance-item{padding:16px;border-radius:var(--radius-md);background:var(--surface-2);border:1px solid rgba(23,23,23,0.05);} .glance-item strong{display:block;margin-bottom:5px;font-size:0.9rem;} .glance-item span{display:block;color:var(--muted);font-size:0.9rem;} .stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px;} .stat-card{border-radius:var(--radius-lg);padding:22px;} .stat-card span,.stat-card .stat-label{display:block;margin-bottom:8px;color:var(--accent-dark);text-transform:uppercase;letter-spacing:0.08em;font-size:0.78rem;font-weight:700;} .stat-card strong,.stat-card .stat-value{display:block;margin-bottom:6px;font-size:1.4rem;letter-spacing:-0.02em;color:var(--text);} .stat-card em{display:block;color:var(--muted);font-style:normal;font-size:0.92rem;} /* ===================================================================== TYPE CARDS (ADU types) ===================================================================== */ .types-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;} .type-card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius-xl);overflow:hidden;display:grid;grid-template-rows:260px auto;} .type-image{position:relative;background-size:cover;background-position:center;} .type-badge{position:absolute;top:18px;left:18px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.92);font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;} .type-body{padding:26px 24px 24px;} .type-body h3{margin:0 0 10px;font-size:1.4rem;letter-spacing:-0.02em;} .type-body p{margin:0 0 16px;color:var(--muted);font-size:0.95rem;} .tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;} .tag{padding:8px 11px;border-radius:999px;background:var(--surface-2);border:1px solid rgba(23,23,23,0.06);font-size:0.83rem;color:var(--accent-dark);font-weight:600;} /* ===================================================================== ALT GRID (image + copy) ===================================================================== */ .alt-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;} .alt-section{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;} .alt-section.reverse{direction:rtl;} .alt-section.reverse>*{direction:ltr;} .alt-image{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);min-height:360px;} .alt-image img{width:100%;height:100%;object-fit:cover;display:block;} .alt-copy h2{margin:0 0 14px;font-size:clamp(1.5rem,2.5vw,2.1rem);} .alt-copy p{margin:0 0 14px;color:var(--muted);font-size:0.95rem;} .alt-copy p:last-child{margin-bottom:0;} .alt-copy a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px;} /* media cards (video / image fill) */ .media-card{position:relative;display:block;border-radius:var(--radius-xl);overflow:hidden;min-height:100%;height:100%;line-height:0;background:#ddd7cc;isolation:isolate;} .media-card.tall{min-height:420px;} .media-card.medium{height:300px;} .media-card.short{height:220px;} .media-fill{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover;display:block;} /* ===================================================================== FEATURE BOX (cross-link) ===================================================================== */ .feature-box{border-radius:32px;padding:44px 48px;background:linear-gradient(135deg,rgba(255,255,255,0.96),rgba(240,236,227,0.85));border:1px solid rgba(180,176,135,0.35);box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;} .feature-copy h2{margin:0 0 12px;font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.1;max-width:28ch;} .feature-copy p{margin:0;color:var(--muted);max-width:58ch;font-size:0.97rem;} /* ===================================================================== FAQ / RESOURCES / BULLETS / NEIGHBORHOODS ===================================================================== */ .faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;} .faq-card strong{display:block;margin-bottom:10px;font-size:1rem;color:var(--text);} .faq .container details,.faq details{border-bottom:1px solid var(--line);padding:16px 0;} .faq summary{cursor:pointer;font-weight:600;color:var(--text);} .faq p{margin-top:10px;} .resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;} .resource-links{display:grid;gap:10px;margin-top:14px;} .resource-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,0.7);font-size:0.92rem;transition:0.2s ease;} .resource-links a:hover{background:#fff;border-color:rgba(180,176,135,0.75);} .inline-link{color:var(--accent-dark);border-bottom:1px solid rgba(180,176,135,0.5);} .inline-link:hover{color:var(--text);border-color:var(--text);} .bullet-list{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:9px;} .bullet-list li{position:relative;padding-left:16px;color:var(--muted);font-size:0.93rem;} .bullet-list li::before{content:"•";position:absolute;left:0;color:var(--accent-dark);font-weight:900;} .neighborhood-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;} .neighborhood-pill{padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:0.88rem;color:var(--muted);box-shadow:0 2px 8px rgba(0,0,0,0.04);} /* phase jump nav (construction phases) */ .phase-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;} .phase-jump a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,0.8);border:1px solid var(--line);font-size:0.88rem;font-weight:600;transition:0.2s ease;} .phase-jump a:hover{background:#fff;border-color:rgba(180,176,135,0.75);color:var(--accent-dark);} .phase-jump-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(180,176,135,0.18);color:var(--accent-dark);font-size:0.76rem;font-weight:800;flex-shrink:0;} /* phase layout (construction phases trails) */ .phase-layout{display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.2fr) minmax(0,0.95fr);gap:18px;align-items:start;} .trail{display:grid;gap:16px;align-content:start;padding-top:18px;} .trail-card{position:relative;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;overflow:hidden;transition:transform 0.25s ease;} .trail-card:hover{transform:translateY(-3px);} .trail-media{position:relative;overflow:hidden;background:var(--surface-2);aspect-ratio:2/3;} .trail-card.short .trail-media{aspect-ratio:3/4;} .trail-card.square .trail-media{aspect-ratio:1/1;} .trail-card.wide .trail-media{aspect-ratio:4/3;} .trail-media img{width:100%;height:100%;object-fit:cover;} .trail-card figcaption{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);color:var(--text);font-size:0.82rem;line-height:1.45;box-shadow:0 10px 28px rgba(0,0,0,0.12);} .phase-copy-inner{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius-xl);padding:30px;} .phase-topline{display:flex;align-items:center;gap:14px;margin-bottom:16px;} .phase-kicker{margin-bottom:0;} .phase-copy h2{margin:0 0 6px;font-size:clamp(1.55rem,2.5vw,2.1rem);} .phase-sub{margin:0 0 16px;color:var(--muted);font-size:0.97rem;} .phase-copy p{margin:0 0 14px;color:var(--muted);font-size:0.95rem;} .placeholder-card .trail-media{display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,255,255,0.65),rgba(239,235,227,0.9));} .placeholder-badge{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(180,176,135,0.16);color:var(--accent-dark);font-size:0.78rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;} /* ===================================================================== CTA BOX ===================================================================== */ .cta{padding-bottom:80px;} .cta-box{border-radius:32px;padding:40px;background:linear-gradient(135deg,#1c1c1c,#2b2b2b);color:#fff;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;box-shadow:var(--shadow);} .cta-box h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.8rem);background:linear-gradient(135deg,#ffffff 0%,#b4b087 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .cta-box p{margin:0;color:rgba(255,255,255,0.72);max-width:62ch;font-size:0.95rem;} .cta-box .btn-primary{background:#fff;color:var(--text);} .footer-note{margin-top:14px;font-size:0.88rem;color:rgba(255,255,255,0.45);} /* ===================================================================== SITE FOOTER (theme chrome) ===================================================================== */ .site-footer{background:#141414;color:#cfcfcf;margin-top:30px;padding:48px 0 14px;} .site-footer a{color:#e4ddc7;} .footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:34px;} .site-footer h3{color:#fff;margin:0 0 12px;font-size:1.05rem;} .footer-cols p{color:#b9b9b9;font-size:0.93rem;margin:0 0 10px;} .footer-links{list-style:none;padding:0;margin:0;} .footer-links li{margin-bottom:7px;} .footer-areas{font-size:0.9rem;line-height:1.9;color:#b9b9b9;} .site-footer .copy{border-top:1px solid #2a2a2a;margin-top:30px;padding-top:16px;text-align:center;} .site-footer .copy p{font-size:0.82rem;margin:0;color:#8f8f8f;} /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width:1100px){ .hero-grid,.intro-grid,.two-col,.three-col,.alt-grid,.alt-section,.alt-section.reverse, .process,.process-grid,.step-grid,.four-col,.summary-grid,.service-grid,.fit-grid, .faq-grid,.resource-grid,.phase-layout,.feature-box,.cta-box,.types-grid,.footer-cols{ grid-template-columns:1fr; } .alt-section.reverse{direction:ltr;} .hero-copy{padding:42px 28px 32px;} .hero-visual{min-height:360px;} } @media (max-width:760px){ .container{width:min(calc(100% - 24px),var(--max));} .nav-burger{display:block;color:var(--text);font-size:1.6rem;cursor:pointer;} .main-nav{display:none;position:absolute;top:66px;left:0;right:0;background:#fbf9f4;flex-direction:column;align-items:flex-start;gap:0;border-bottom:1px solid var(--line);padding:8px 0;} .nav-list{flex-direction:column;align-items:flex-start;gap:0;width:100%;} .nav-list a{display:block;padding:12px 20px;width:100%;} .nav-cta{margin:10px 20px;} .nav-toggle:checked ~ .main-nav{display:flex;} .glance-grid,.stat-grid,.tag-row{grid-template-columns:1fr;} .hero-shell,.type-card,.cta-box,.card,.faq-card,.step,.process-step,.summary-card,.note-band,.feature-box{border-radius:22px;} .cta-box{padding:28px;} } .logo{font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text);font-size:1.05rem;white-space:nowrap;} .logo:hover{color:var(--accent-dark);}