/* ============================================================ JM Farm - shared stylesheet (all public pages) Palette: cream paper, soil ink, pasture green, barn red, wheat gold. System serif display, system sans body. No external fonts or assets. Works offline. ============================================================ */ :root{ --paper:#F7F3E8; --card:#FFFDF6; --panel:#EFE8D4; --line:#E2D9C4; --line2:#B9AC8C; --ink:#2E2418; --muted:#5C5140; --faint:#8A7C60; --green:#4A7042; --green-hover:#3D5C36; --green-dark:#2F4A2A; --green-tint:#E4EDDD; --red:#A5402D; --red-dark:#7A2E1E; --red-tint:#E9DDD6; --gold-tint:#F3E3C2; --gold-dark:#6B4E12; --photo:#C9BC9C; --photo-ink:#7A6C4E; --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --r-lg:10px; --r-md:9px; --r-sm:7px; --maxw:1060px; } /* ---- THEME SYSTEM ---------------------------------------------- Light (cream) is the default when a device states no preference. Dark applies two ways, and the variable blocks below MUST be kept identical (no CSS preprocessor, so they are written twice): 1) the device asks for dark AND the visitor has not chosen light 2) the visitor explicitly chose dark with the header toggle The toggle (site.js) sets data-theme="light|dark" on and stores the choice; with no stored choice, the device decides. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#211B12; --card:#2A2318; --panel:#2E2718; --line:#3E3524; --line2:#5C5140; --ink:#EFE8D8; --muted:#C4B89E; --faint:#95886C; --green:#6E9963; --green-hover:#7FAA74; --green-dark:#CFE3C6; --green-tint:#33402C; --red:#D0705B; --red-dark:#EDC0B4; --red-tint:#463027; --gold-tint:#453A1E; --gold-dark:#E3C87E; --photo:#4A4230; --photo-ink:#A79877; } /* Photos glare against the dark ground; take the edge off. */ /* Item-page galleries stay full brightness: that is where buyers inspect photos. Only the hero and grid cards get dimmed. */ :root:not([data-theme="light"]) .hero-photo img, :root:not([data-theme="light"]) .card-photo{filter:brightness(.82)} /* effective dark: toggle offers the sun (switch to light) */ :root:not([data-theme="light"]) .theme-toggle .moon{display:none} :root:not([data-theme="light"]) .theme-toggle .sun{display:block} } :root[data-theme="dark"]{ --paper:#211B12; --card:#2A2318; --panel:#2E2718; --line:#3E3524; --line2:#5C5140; --ink:#EFE8D8; --muted:#C4B89E; --faint:#95886C; --green:#6E9963; --green-hover:#7FAA74; --green-dark:#CFE3C6; --green-tint:#33402C; --red:#D0705B; --red-dark:#EDC0B4; --red-tint:#463027; --gold-tint:#453A1E; --gold-dark:#E3C87E; --photo:#4A4230; --photo-ink:#A79877; } :root[data-theme="dark"] .hero-photo img, :root[data-theme="dark"] .card-photo{filter:brightness(.82)} :root[data-theme="dark"] .theme-toggle .moon{display:none} :root[data-theme="dark"] .theme-toggle .sun{display:block} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none !important;transition:none !important} } body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased; } img,svg{max-width:100%;height:auto} a{color:var(--green)} h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0 0 .5em} h1{font-size:clamp(28px,5vw,40px)} h2{font-size:clamp(21px,3.2vw,26px)} h3{font-size:18px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} .skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:8px 14px;border-radius:0 0 var(--r-sm) 0;z-index:20} .skip:focus{left:0} /* ------- header / nav ------- */ .site-header{border-bottom:1px solid var(--line);background:var(--paper)} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)} .brand-logo{width:44px;height:44px;flex:none} .header-right{display:flex;align-items:center;gap:16px} .theme-toggle{background:none;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);padding:0} .theme-toggle:hover{color:var(--ink);border-color:var(--line2)} .theme-toggle svg{width:17px;height:17px} .theme-toggle .sun{display:none} .theme-toggle.ready{display:flex} .brand-name{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.1} .brand-loc{font-size:11px;letter-spacing:.08em;color:var(--faint)} .site-nav{display:flex;gap:22px;font-size:15px} .site-nav a{color:var(--muted);text-decoration:none;padding-bottom:2px} .site-nav a:hover{color:var(--ink)} .site-nav a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--green)} /* ------- hero ------- */ .hero{display:grid;grid-template-columns:1.1fr 1fr;border-bottom:1px solid var(--line)} .hero-copy{padding:clamp(30px,6vw,56px) 20px clamp(30px,6vw,56px) max(20px,calc((100vw - var(--maxw)) / 2 + 20px));background:var(--panel);display:flex;flex-direction:column;justify-content:center} .eyebrow{font-size:12px;letter-spacing:.14em;color:var(--red);font-weight:600;margin:0 0 8px;text-transform:uppercase} .hero-copy h1{margin-bottom:14px} .hero-copy p{margin:0 0 22px;color:var(--muted);max-width:34em} .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block} .hero-photo{min-height:280px} /* ------- buttons ------- */ .btn{display:inline-block;font-size:15px;padding:11px 22px;border-radius:var(--r-sm);text-decoration:none;border:0;cursor:pointer;font-family:var(--sans)} .btn-solid{background:var(--green);color:#F7F3E8} .btn-solid:hover{background:var(--green-hover)} .btn-line{border:1px solid var(--line2);color:var(--ink);background:transparent;margin-left:10px} .btn-line:hover{border-color:var(--faint)} /* ------- sections ------- */ section{padding:30px 0} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap} .sec-head h2{margin:0} .more-link{font-size:14px;text-decoration:none} /* ------- listing cards ------- */ .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column} .card:hover{border-color:var(--line2)} .card.sold{opacity:.55} .card-photo{aspect-ratio:4/3;background:var(--photo);display:block;width:100%;object-fit:cover} .card-body{padding:13px 15px} .card-title{margin:0;font-size:15.5px;font-weight:600;font-family:var(--sans)} .card-sub{margin:3px 0 6px;font-size:13px;color:var(--muted)} .card-price{margin:0;font-size:16px;color:var(--red);font-weight:600} .badge{display:inline-block;font-size:11.5px;padding:3px 10px;border-radius:12px;margin-bottom:8px;font-weight:500} .b-available{background:var(--green-tint);color:var(--green-dark)} .b-coming-soon{background:var(--line);color:var(--muted)} .b-pending{background:var(--gold-tint);color:var(--gold-dark)} .b-sold{background:var(--red-tint);color:var(--red-dark)} .b-deposits{background:var(--green);color:var(--paper)} /* SOLD marking: pure CSS over untouched photo files, so relisting a listing removes every trace instantly. .pw wraps photos (ribbon anchor); the ribbon shows on sold grid cards and the item main photo. */ .pw{position:relative;display:block;overflow:hidden} .card.sold .pw::after, .item-pw.sold::after{ content:"SOLD";position:absolute;top:22px;right:-46px;transform:rotate(38deg); background:var(--red);color:var(--paper);font-weight:700;font-size:13px; letter-spacing:.22em;padding:6px 54px;box-shadow:0 2px 6px rgba(0,0,0,.25); pointer-events:none; } .item-pw.sold::after{font-size:15px;top:30px;right:-50px;padding:7px 60px} .price-strike{text-decoration-color:var(--red);text-decoration-thickness:2px;color:var(--muted);font-weight:500} .sold-word{color:var(--red);font-weight:600} .card-deposit{margin:3px 0 0;font-size:12.5px;color:var(--muted)} .item-deposit{margin:-12px 0 18px;font-size:14px;color:var(--muted)} /* ------- home split (news + categories) ------- */ .split{display:grid;grid-template-columns:1.35fr 1fr;gap:34px} .post{border-left:3px solid var(--green);padding:3px 0 3px 15px;margin-bottom:16px} .post ~ .post{border-left-color:var(--line)} .post-date{margin:0;font-size:12.5px;color:var(--faint)} .post-title{margin:3px 0;font-size:16px;font-weight:600;font-family:var(--sans)} .post p{margin:0;font-size:14.5px;color:var(--muted)} .cats{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;font-size:14px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .cat:hover{border-color:var(--line2)} .cat .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none} /* ------- about + contact ------- */ .about{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .about p{max-width:46em;color:var(--muted)} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px} .contact-list{list-style:none;padding:0;margin:0;font-size:15px} .contact-list li{margin-bottom:10px} .contact-list strong{display:inline-block;min-width:64px;color:var(--faint);font-weight:500} form label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px} form input,form textarea{width:100%;border:1px solid var(--line2);border-radius:var(--r-sm);padding:10px 12px;font-size:15px;font-family:var(--sans);background:var(--card);color:var(--ink)} form textarea{min-height:110px;resize:vertical} form button{margin-top:14px} .form-note{font-size:12.5px;color:var(--faint);margin-top:8px} /* ------- for sale page ------- */ .page-head{padding:30px 0 0} .page-head p{color:var(--muted);margin:0 0 18px} .filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px} .chip{font-size:13.5px;padding:7px 16px;border-radius:18px;border:1px solid var(--line2);color:var(--ink);text-decoration:none;background:transparent;cursor:pointer;font-family:var(--sans)} .chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#F7F3E8} /* ------- item page ------- */ .back-link{font-size:14px;text-decoration:none;display:inline-block;margin:24px 0 4px} .item-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;padding:14px 0 40px} .item-photo-main{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--photo);border-radius:var(--r-md);display:block} .item-pw{border-radius:var(--r-md)} .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px} .thumbs a{display:block;border-radius:var(--r-sm);overflow:hidden;border:3px solid transparent} .thumbs a[aria-current="true"]{border-color:var(--green)} .thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--photo)} .item-title{margin:6px 0} .item-price{font-size:24px;color:var(--red);font-weight:600;margin:0 0 18px;font-family:var(--sans)} .details{width:100%;font-size:14.5px;border-collapse:collapse;margin-bottom:18px} .details td{padding:9px 0;border-bottom:1px solid var(--line)} .details td:first-child{color:var(--faint);padding-right:16px} .details tr:last-child td{border-bottom:0} .item-desc{color:var(--muted);margin:0 0 22px} .item-hint{font-size:12.5px;color:var(--faint);margin-top:8px} /* ------- per-listing contact form ------- */ .item-contact{margin-top:26px;border-top:1px solid var(--line);padding-top:16px} .item-contact h3{margin-bottom:2px} /* ------- footer ------- */ .site-footer{border-top:1px solid var(--line);margin-top:20px} .site-footer .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:22px;padding-bottom:26px;font-size:13.5px;color:var(--muted)} .site-footer a{color:var(--muted)} /* ------- motion (opt-in only when allowed) ------- */ @media (prefers-reduced-motion: no-preference){ .card,.cat{transition:transform .15s ease,border-color .15s ease} .card:hover,.cat:hover{transform:translateY(-2px)} .btn{transition:background .15s ease,border-color .15s ease} } /* ------- responsive ------- */ @media (max-width:860px){ .hero{grid-template-columns:1fr} .hero-copy{padding-left:20px} .hero-photo{min-height:220px} .grid{grid-template-columns:repeat(2,1fr)} .split,.contact-grid,.item-layout{grid-template-columns:1fr} } @media (max-width:540px){ .grid{grid-template-columns:1fr} .site-nav{gap:16px;font-size:14px} .btn-line{margin-left:6px} }