/* ============================================ OPTIMUM DECKS — Design System Ink / Walnut / Cedar / Sawdust / Parchment / Sunrise Font loading: Oswald/Inter/IBM Plex Mono are linked in the of each page (with preconnect) rather than @imported here, so the fonts start downloading immediately instead of blocking first paint until the CSS file itself has loaded. ============================================ */ :root{ --ink: #1E1B16; --walnut: #4A2F1C; --cedar: #A9703F; --cedar-light: #C68F5E; --sawdust: #F4ECDD; --parchment: #FBF7F0; --sunrise: #E8963C; --sunrise-dim: #E8963C33; --font-display: 'Oswald', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --max-width: 1180px; } *{ box-sizing: border-box; margin:0; padding:0; } html{ scroll-behavior: smooth; } body{ font-family: var(--font-body); background: var(--parchment); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .wrap{ max-width: var(--max-width); margin: 0 auto; padding: 0 32px; } h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; line-height: 1.08; color: var(--ink); } .eyebrow{ font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--walnut); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; } .eyebrow::before{ content:''; width: 22px; height: 1.5px; background: var(--sunrise); display:inline-block; } a.eyebrow:hover{ color: var(--cedar); } /* ============ ACCESSIBILITY: SKIP LINK ============ */ .skip-link{ position: absolute; top: -100px; left: 12px; z-index: 1000; background: var(--ink); color: var(--parchment); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; padding: 12px 20px; border-radius: 2px; transition: top 0.15s ease; } .skip-link:focus{ top: 12px; } /* ============ ACCESSIBILITY: VISIBLE FOCUS STATES ============ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .nav-toggle:focus-visible{ outline: 2.5px solid var(--sunrise); outline-offset: 3px; border-radius: 2px; } /* dark backgrounds need a lighter, higher-contrast ring */ .hero a:focus-visible, .section-dark a:focus-visible, .section-dark button:focus-visible, footer a:focus-visible{ outline-color: var(--parchment); } /* Honeypot field — hidden from sighted users and real visitors, still reachable in the DOM so basic form-spam bots that fill every field get caught server-side. */ .hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ============ PLANK LINE — signature divider ============ */ .plank-line{ display:flex; width:100%; height: 10px; overflow:hidden; box-shadow: 0 1px 0 rgba(0,0,0,0.06); } .plank-line span{ flex: 1 0 auto; height:100%; width: 46px; } .plank-line.warm span:nth-child(6n+1){ background:var(--ink); } .plank-line.warm span:nth-child(6n+2){ background:var(--walnut); } .plank-line.warm span:nth-child(6n+3){ background:var(--cedar); } .plank-line.warm span:nth-child(6n+4){ background:var(--cedar-light); } .plank-line.warm span:nth-child(6n+5){ background:var(--walnut); } .plank-line.warm span:nth-child(6n){ background:var(--ink); } .plank-line.dark span:nth-child(5n+1){ background:var(--sawdust); } .plank-line.dark span:nth-child(5n+2){ background:var(--cedar); } .plank-line.dark span:nth-child(5n+3){ background:var(--walnut); } .plank-line.dark span:nth-child(5n+4){ background:var(--sunrise); } .plank-line.dark span:nth-child(5n){ background:var(--cedar-light); } /* ============ NAV ============ */ header.site-header{ position: sticky; top:0; z-index: 100; background: rgba(251,247,240,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(30,27,22,0.08); } .nav-inner{ display:flex; align-items:center; justify-content: space-between; padding: 16px 32px; max-width: var(--max-width); margin:0 auto; } .brand{ display:flex; align-items:center; gap:13px; color: var(--ink); } .brand-mark{ width: 38px; height: auto; flex-shrink: 0; } .brand-text{ display:flex; flex-direction: column; line-height: 1; } .brand-main{ font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: 0.02em; text-transform: uppercase; } .brand-main em{ font-style: normal; color: var(--sunrise); } .brand-tag{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cedar); margin-top: 5px; } @media (max-width: 520px){ .brand-tag{ display: none; } } nav.main-nav ul{ display:flex; gap: 34px; list-style:none; } nav.main-nav a{ font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); position:relative; padding-bottom:4px; } nav.main-nav a.active, nav.main-nav a:hover{ color: var(--cedar); } nav.main-nav a.active::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background: var(--sunrise); } .nav-cta{ font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--ink); color: var(--parchment) !important; padding: 11px 20px; border-radius: 2px; transition: background 0.2s ease; } .nav-cta:hover{ background: var(--cedar); } .nav-toggle{ display:none; } /* ============ BUTTONS ============ */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 15px 28px; border-radius: 2px; border: 1.5px solid transparent; cursor:pointer; transition: all 0.2s ease; } .btn-primary{ background: var(--sunrise); color: var(--ink); } .btn-primary:hover{ background: #f0a655; transform: translateY(-1px); } .btn-outline{ border-color: currentColor; color: var(--parchment); } .btn-outline:hover{ background: rgba(251,247,240,0.1); } .btn-dark{ border-color: var(--ink); color: var(--ink); } .btn-dark:hover{ background: var(--ink); color: var(--parchment); } /* ============ AVAILABILITY BADGE ============ */ .avail-badge{ display:inline-flex; align-items:center; gap:10px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--parchment); background: rgba(251,247,240,0.08); border: 1px solid rgba(251,247,240,0.25); padding: 9px 16px; border-radius: 999px; margin-bottom: 26px; } .avail-dot{ width:8px; height:8px; border-radius:50%; background: var(--sunrise); box-shadow: 0 0 0 4px var(--sunrise-dim); flex-shrink:0; } /* ============ WHY-US PILLARS ============ */ .pillars{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .pillar{ padding-top: 4px; } .pillar .pillar-icon{ font-family: var(--font-display); font-size: 15px; letter-spacing: 0.08em; color: var(--sunrise); text-transform: uppercase; margin-bottom: 16px; } .pillar h3{ font-size: 22px; text-transform: uppercase; margin-bottom: 10px; } .pillar p{ color: #4A443B; font-size: 15px; } .section-dark .pillar p{ color:#C9BFB0; } .badge-row{ display:flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; } .badge-chip{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; border: 1px dashed rgba(30,27,22,0.3); color: var(--walnut); padding: 9px 14px; border-radius: 2px; } /* ============ FAQ ACCORDION ============ */ .faq-list{ max-width: 760px; } .faq-item{ border-top: 1px solid rgba(30,27,22,0.12); } .faq-item:last-child{ border-bottom: 1px solid rgba(30,27,22,0.12); } .faq-item summary{ cursor: pointer; list-style: none; padding: 22px 34px 22px 0; position: relative; font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:'+'; position:absolute; right: 4px; top: 20px; font-family: var(--font-mono); font-size: 22px; color: var(--cedar); transition: transform 0.15s ease; } .faq-item[open] summary::after{ content:'−'; } .faq-item p{ padding: 0 34px 24px 0; color: #4A443B; font-size: 15.5px; max-width: 640px; } /* ============ SERVICE AREA ============ */ .area-list{ display:flex; flex-wrap:wrap; gap: 10px 14px; margin-top: 18px; } .area-list a{ font-family: var(--font-mono); font-size: 12.5px; color: #C9BFB0; text-decoration: none; } .area-list a:hover{ color: var(--sunrise); } .area-list a::after{ content:'·'; margin-left:14px; color: var(--cedar-light); } .area-list a:last-child::after{ content:''; } .area-list.on-light a{ color: var(--walnut); } .area-list.on-light a:hover{ color: var(--sunrise); } .area-list.on-light a::after{ color: var(--cedar); } /* ============ HERO ============ */ .hero{ position: relative; background: var(--ink); color: var(--parchment); overflow: hidden; padding: 120px 0 0; } .hero-planks{ position:absolute; inset:0; display:flex; flex-direction:column; opacity: 0.55; } .hero-planks div{ flex:1; } .hero-planks div:nth-child(odd){ background: linear-gradient(90deg, var(--walnut), #5c3a22); } .hero-planks div:nth-child(even){ background: linear-gradient(90deg, #3a2716, var(--walnut)); } .hero-sunmark{ position:absolute; right: -80px; bottom: -40px; width: 620px; height: auto; opacity: 0.14; pointer-events:none; } .hero-inner{ position:relative; z-index:2; max-width: var(--max-width); margin: 0 auto; padding: 40px 32px 100px; } .hero h1{ font-size: clamp(44px, 7vw, 84px); color: var(--parchment); max-width: 900px; text-transform: uppercase; } .hero h1 em{ font-style:normal; color: var(--sunrise); } .hero p.lede{ font-family: var(--font-body); font-size: 18px; color: #D8CFC2; max-width: 520px; margin: 22px 0 36px; } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; } .hero-stats{ display:flex; gap: 48px; margin-top: 64px; flex-wrap: wrap; } .hero-stats .stat-num{ font-family: var(--font-display); font-size: 34px; color: var(--sunrise); } .hero-stats .stat-label{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #B7AC9B; margin-top: 4px; } /* ============ SECTIONS ============ */ section{ padding: 88px 0; background: var(--parchment); } .section-head{ max-width: 640px; margin-bottom: 56px; } .section-head h2{ font-size: clamp(30px, 4vw, 44px); text-transform: uppercase; color: var(--ink); } .section-head p{ margin-top: 16px; font-size: 16.5px; color: #4A443B; } .section-alt{ background: var(--sawdust) !important; } .section-dark{ background: var(--ink) !important; color: var(--parchment); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4{ color: var(--parchment) !important; } .section-dark .section-head h2{ color: var(--parchment) !important; } .section-dark .section-head p{ color: #C9BFB0 !important; } .section-dark p{ color: #C9BFB0; } /* ============ SERVICE CARDS ============ */ .grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .card{ background: var(--parchment); border: 1px solid rgba(30,27,22,0.09); padding: 34px 28px; transition: border-color 0.2s ease, transform 0.2s ease; } .card:hover{ border-color: var(--cedar); transform: translateY(-3px); } .card .card-num{ font-family: var(--font-mono); font-size: 12px; color: var(--cedar); letter-spacing: 0.08em; } .card h3{ font-size: 23px; margin: 14px 0 10px; text-transform: uppercase; } .card p{ color: #4A443B; font-size: 15px; } .card .tag-row{ margin-top: 18px; display:flex; flex-wrap:wrap; gap: 8px; } .tag{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; background: var(--sawdust); color: var(--walnut); padding: 5px 10px; border-radius: 2px; } /* ============ PROCESS (real sequence — numbering earned) ============ */ .process-list{ display:flex; flex-direction:column; } .process-step{ display:grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 30px 0; border-top: 1px solid rgba(251,247,240,0.14); } .process-step:last-child{ border-bottom: 1px solid rgba(251,247,240,0.14); } .process-step .step-num{ font-family: var(--font-display); font-size: 42px; color: var(--cedar-light); } .process-step h4{ color: var(--parchment); font-size: 21px; text-transform: uppercase; margin-bottom: 8px; } .process-step p{ color: #C9BFB0; font-size: 15px; max-width: 560px; } /* ============ GALLERY / PLACEHOLDER FRAMES ============ */ .frame{ position: relative; aspect-ratio: 4/3; overflow:hidden; background: linear-gradient(135deg, var(--walnut), var(--cedar)); display:flex; align-items:flex-end; } .frame::before{ content:''; position:absolute; inset:0; background-image: repeating-linear-gradient( 180deg, rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 2px, transparent 2px, transparent 34px ); } .frame img{ position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; } .frame .frame-tag{ position:relative; z-index:2; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--parchment); background: rgba(30,27,22,0.55); padding: 10px 14px; width:100%; } /* ============ TESTIMONIAL ============ */ .quote-block{ border-left: 3px solid var(--sunrise); padding-left: 28px; max-width: 720px; } .quote-block p{ font-size: 22px; font-family: var(--font-display); font-weight:400; line-height:1.4; } .quote-block .attrib{ margin-top: 18px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cedar); } /* ============ CONTACT ============ */ .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; } .field{ margin-bottom: 20px; } .field label{ display:block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--walnut); margin-bottom: 8px; } .field input, .field select, .field textarea{ width:100%; padding: 13px 14px; border: 1.5px solid rgba(30,27,22,0.18); background: var(--parchment); font-family: var(--font-body); font-size: 15px; color: var(--ink); border-radius: 2px; } .field textarea{ resize: vertical; min-height: 110px; } .field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--cedar); } .contact-info-item{ display:flex; gap:16px; padding: 20px 0; border-top: 1px solid rgba(30,27,22,0.1); } .contact-info-item:last-child{ border-bottom: 1px solid rgba(30,27,22,0.1); } .contact-info-item .ci-label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cedar); min-width: 110px; } .contact-info-item .ci-value{ font-size: 16px; } /* ============ FOOTER ============ */ footer{ background: var(--ink); color: var(--parchment); padding: 56px 0 28px; } .footer-top{ display:flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; padding-bottom: 40px; } .footer-brand{ display:flex; align-items:center; gap:12px; } .footer-mark{ height: 30px; width:auto; } .footer-brand span{ font-family: var(--font-display); font-size:18px; text-transform: uppercase; } .footer-cols{ display:flex; gap:64px; flex-wrap:wrap; } .footer-col h5{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cedar-light); margin-bottom: 14px; } .footer-col a, .footer-col p{ display:block; font-size: 14px; color: #C9BFB0; margin-bottom: 10px; } .footer-col a:hover{ color: var(--sunrise); } .footer-bottom{ padding-top: 24px; border-top: 1px solid rgba(251,247,240,0.12); display:flex; justify-content: space-between; flex-wrap:wrap; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: #948A7E; } /* ============ PAGE HEADER (subpages) ============ */ .page-header{ background: var(--ink); color: var(--parchment); padding: 150px 0 64px; position: relative; overflow:hidden; } .page-header .hero-sunmark{ width: 420px; opacity:0.12; } .page-header h1{ font-size: clamp(38px, 6vw, 62px); color: var(--parchment); text-transform: uppercase; position:relative; z-index:2; } .page-header p{ color: #C9BFB0; max-width: 520px; margin-top: 16px; font-size: 16.5px; position:relative; z-index:2; } /* ============ UTILITY ============ */ .text-center{ text-align:center; margin-left:auto; margin-right:auto; } .mt-64{ margin-top:64px; } /* ============ RESPONSIVE ============ */ @media (max-width: 860px){ nav.main-nav{ position: fixed; top: 66px; left:0; right:0; background: var(--parchment); flex-direction:column; padding: 20px 32px 28px; border-bottom: 1px solid rgba(30,27,22,0.1); display:none; } nav.main-nav.open{ display:flex; } nav.main-nav ul{ flex-direction:column; gap:18px; } .nav-toggle{ display:block; background:none; border:none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor:pointer; } .nav-cta{ display:none; } .grid-3, .grid-2, .contact-grid, .pillars{ grid-template-columns: 1fr; } .hero-stats{ gap: 32px; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ transition: none !important; animation: none !important; } }