/* ========================================================================== Ian's Pumpkin Patch & Christmas Trees — styles.css Warm, hand-made, small-town Americana. Mobile-first. Season theming: gets .season-pumpkin | .season-trees | .season-off (set by js/season.js from js/site.config.js). ========================================================================== */ :root { --pumpkin: #E8742C; --evergreen: #1F4D3A; --cream: #FBF5EA; --hay: #D9A441; --barn-red: #A33A2B; --charcoal: #2B2A28; /* Derived */ --hay-ink: #8A6114; /* hay, darkened for AA text on cream */ --hay-bright: #E2AE52; /* hay, lightened for AA text on evergreen */ --tint: #F4E9D3; /* alternating section background */ --line: rgba(43, 42, 40, .14); --evergreen-deep: #16382A; /* Seasonal accent (pumpkin season is the default) */ --accent: var(--pumpkin); --accent-ink: var(--charcoal); /* text on accent */ --accent-text: var(--barn-red); /* warm accent used AS text on cream */ --font-display: "Alfa Slab One", "Rockwell", "Georgia", serif; --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --container: 68rem; --radius: 14px; --shadow: 0 2px 10px rgba(43, 42, 40, .12), 0 8px 28px rgba(43, 42, 40, .10); } .season-trees { --accent: var(--evergreen); --accent-ink: var(--cream); --accent-text: var(--evergreen); } .season-off { --accent: var(--evergreen); --accent-ink: var(--cream); --accent-text: var(--evergreen); } /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--charcoal); background-color: var(--cream); /* Subtle paper grain — the one texture. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); } img { max-width: 100%; height: auto; display: block; } a { color: var(--evergreen); text-underline-offset: 2px; } a:hover { color: var(--barn-red); } h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; } h1, h2, .display { font-family: var(--font-display); font-weight: 400; color: var(--evergreen); letter-spacing: .01em; } h3 { color: var(--evergreen); font-weight: 800; } p { margin: 0 0 1em; } ul { padding-left: 1.2em; } :focus-visible { outline: 3px solid var(--barn-red); outline-offset: 2px; border-radius: 3px; } .season-trees :focus-visible, .season-off :focus-visible { outline-color: var(--hay-ink); } .container { max-width: var(--container); margin-inline: auto; padding-inline: 1.1rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: .5rem; top: -3.5rem; z-index: 100; background: var(--evergreen); color: var(--cream); padding: .6rem 1rem; border-radius: 8px; transition: top .15s ease; } .skip-link:focus { top: .5rem; color: var(--cream); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; padding: .8rem 1.5rem; border-radius: 999px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease; } .btn:active { transform: translateY(1px); } .btn svg { flex: 0 0 auto; } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: var(--barn-red); color: var(--cream); } .btn--outline { background: var(--cream); color: var(--evergreen); border-color: var(--evergreen); } .btn--outline:hover { background: var(--evergreen); color: var(--cream); } .btn--onphoto { background: rgba(251, 245, 234, .96); color: var(--evergreen); } .btn--onphoto:hover { background: var(--barn-red); color: var(--cream); } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 245, 234, .95); backdrop-filter: blur(6px); border-bottom: 2px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: .75rem; padding-block: .55rem; flex-wrap: wrap; } .logo { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; margin-right: auto; } .logo__name { font-family: var(--font-display); font-size: 1.65rem; color: var(--evergreen); letter-spacing: .02em; } .logo__est { font-size: .8rem; font-weight: 800; color: var(--hay-ink); text-transform: uppercase; letter-spacing: .08em; } .header-call { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .95rem; text-decoration: none; color: var(--cream); background: var(--evergreen); padding: .5rem .95rem; border-radius: 999px; } .header-call:hover { background: var(--barn-red); color: var(--cream); } @media (max-width: 480px) { .logo__name { font-size: 1.4rem; } .logo__est { font-size: .7rem; } .header-call { font-size: .85rem; padding: .42rem .75rem; } } .site-nav { width: 100%; } .site-nav ul { list-style: none; display: flex; gap: .35rem; margin: 0; padding: 0 0 .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } .site-nav a { display: inline-block; white-space: nowrap; font-weight: 800; font-size: .98rem; text-decoration: none; color: var(--evergreen); padding: .35rem .85rem; border-radius: 999px; border: 2px solid transparent; } .site-nav a:hover { border-color: var(--evergreen); color: var(--evergreen); } .site-nav a[aria-current="page"] { background: var(--evergreen); color: var(--cream); } /* Seasonal item: first + flagged */ .season-pumpkin .nav-item--pumpkin { order: -1; } .season-trees .nav-item--trees { order: -1; } .season-pumpkin .nav-item--pumpkin a:not([aria-current]), .season-trees .nav-item--trees a:not([aria-current]) { border-color: var(--hay); background: rgba(217, 164, 65, .16); } @media (min-width: 860px) { .site-header__inner { flex-wrap: nowrap; } .site-nav { width: auto; } .site-nav ul { padding: 0; overflow: visible; } } /* ---------- Season status banner ---------- */ .season-banner { margin: 0; padding: .5rem 1.1rem; text-align: center; font-weight: 800; font-size: .98rem; background: var(--accent); color: var(--accent-ink); } .season-off .season-banner { background: var(--charcoal); color: var(--cream); } .season-banner a { color: inherit; } /* ---------- Heroes ---------- */ .hero, .page-hero { position: relative; overflow: hidden; background: var(--evergreen); } .hero { min-height: min(78vh, 40rem); display: flex; align-items: flex-end; } .page-hero { min-height: min(56vh, 30rem); display: flex; align-items: flex-end; } .hero__media, .page-hero__media { position: absolute; inset: 0; } .hero__media img, .page-hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__scrim, .page-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 20, 12, .82) 0%, rgba(24, 20, 12, .45) 34%, rgba(24, 20, 12, .05) 62%, rgba(24, 20, 12, 0) 100%); } .hero__content, .page-hero__content { position: relative; width: 100%; padding-block: 1.6rem 2.1rem; color: var(--cream); } .hero__content h1, .page-hero__content h1 { color: #fff; font-size: clamp(2.5rem, 6.5vw, 3.9rem); text-shadow: 0 2px 14px rgba(0, 0, 0, .45); margin-bottom: .35rem; max-width: 21ch; } .hero__sub, .page-hero__sub { font-size: clamp(1.05rem, 2.5vw, 1.25rem); font-weight: 700; max-width: 46ch; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); margin-bottom: 1.1rem; } .hero__ctas { display: flex; flex-wrap: wrap; gap: .7rem; } .hero__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0 0 .9rem; font-weight: 800; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); padding: 0; list-style: none; } .hero__meta li { display: inline-flex; align-items: center; gap: .4rem; } /* ---------- Open-now strip ---------- */ .open-strip { background: var(--evergreen); color: var(--cream); } .open-strip__inner { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; padding-block: .8rem; font-weight: 700; font-size: .98rem; } .open-strip__item { display: inline-flex; align-items: center; gap: .5rem; } .open-strip__item svg { color: var(--hay); } .open-strip a { color: var(--cream); } .open-strip a:hover { color: var(--hay); } /* ---------- Sections ---------- */ .section { padding-block: 2.8rem; } .section--tint { background: var(--tint); } .section__eyebrow { display: block; font-size: .9rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .4rem; } .section h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); } .section__lead { max-width: 62ch; } /* Scalloped divider — tile matches the color of the section it belongs to. */ .scallop { height: 16px; background-repeat: repeat-x; background-size: 44px 16px; } .scallop--tint { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Cpath d='M0 16h44V8a22 22 0 0 0-44 0z' fill='%23F4E9D3'/%3E%3C/svg%3E"); } .scallop--cream { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Cpath d='M0 16h44V8a22 22 0 0 0-44 0z' fill='%23FBF5EA'/%3E%3C/svg%3E"); } .scallop--green { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Cpath d='M0 16h44V8a22 22 0 0 0-44 0z' fill='%231F4D3A'/%3E%3C/svg%3E"); } /* ---------- Cards ---------- */ .card-grid { display: grid; gap: 1.3rem; } @media (min-width: 700px) { .card-grid--2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 820px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } } .season-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; } .season-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .season-card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; } .season-card__body h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; margin: 0; } .season-card__dates { font-weight: 800; color: var(--hay-ink); font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; } .season-card__body p { margin: 0; } .season-card__link { margin-top: auto; padding-top: .8rem; font-weight: 800; } .season-pumpkin .season-card--pumpkin, .season-trees .season-card--trees { border: 3px solid var(--hay); } /* Review cards */ .review-card { background: #fff; border-radius: var(--radius); padding: 1.3rem 1.35rem; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .7rem; } .review-card__mark { color: var(--accent-text); } .season-pumpkin .review-card__mark--pumpkin, .review-card__mark--pumpkin { color: var(--barn-red); } .review-card__mark--tree { color: var(--evergreen); } .review-card blockquote { margin: 0; font-size: 1.05rem; } .review-card cite { font-style: normal; font-weight: 800; color: var(--hay-ink); font-size: .95rem; } /* Story */ .story { display: grid; gap: 1.6rem; align-items: center; } @media (min-width: 880px) { .story { grid-template-columns: 1.05fr 1fr; } } .story__img { border-radius: var(--radius); box-shadow: var(--shadow); transform: rotate(-1.2deg); border: 8px solid #fff; } /* ---------- Gallery (polaroid thumbs + lightbox) ---------- */ .gallery { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } } .gallery__item { display: block; background: #fff; padding: 8px 8px 12px; border-radius: 8px; box-shadow: var(--shadow); transform: rotate(-1.5deg); transition: transform .18s ease; } .gallery__item:nth-child(2n) { transform: rotate(1.3deg); } .gallery__item:nth-child(3n) { transform: rotate(-.7deg); } .gallery__item:hover, .gallery__item:focus-visible { transform: rotate(0) scale(1.02); } .gallery__item img { border-radius: 4px; aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(24, 20, 12, .93); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; } .lightbox[hidden] { display: none; } .lightbox img { max-width: min(94vw, 60rem); max-height: 78vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 10px 50px rgba(0, 0, 0, .6); } .lightbox figure { margin: 0; text-align: center; } .lightbox figcaption { color: var(--cream); margin-top: .8rem; font-weight: 700; } .lightbox__btn { position: absolute; background: rgba(251, 245, 234, .14); color: #fff; border: 2px solid rgba(251, 245, 234, .4); border-radius: 999px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .lightbox__btn:hover { background: rgba(251, 245, 234, .3); } .lightbox__close { top: 1rem; right: 1rem; } .lightbox__prev { left: .7rem; top: 50%; transform: translateY(-50%); } .lightbox__next { right: .7rem; top: 50%; transform: translateY(-50%); } /* ---------- Icon grid (services / offerings) ---------- */ .icon-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; padding: 0; list-style: none; } @media (min-width: 620px) { .icon-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 920px) { .icon-grid--3 { grid-template-columns: repeat(3, 1fr); } } .icon-grid li { display: flex; gap: .85rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .95rem 1.05rem; box-shadow: 0 1px 4px rgba(43, 42, 40, .07); } .icon-grid svg { flex: 0 0 auto; color: var(--accent-text); margin-top: .15rem; } .icon-grid b { display: block; color: var(--evergreen); } /* Steps */ .steps { list-style: none; padding: 0; display: grid; gap: 1rem; counter-reset: step; } @media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } } .steps li { counter-increment: step; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); padding: 1.1rem 1.2rem 1.2rem; box-shadow: 0 1px 4px rgba(43, 42, 40, .07); } .steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 999px; margin-bottom: .5rem; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-size: 1.15rem; } /* Tip box */ .tip { border-left: 6px solid var(--hay); background: rgba(217, 164, 65, .14); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.2rem; max-width: 46rem; display: flex; gap: .8rem; align-items: flex-start; } .tip svg { color: var(--hay-ink); flex: 0 0 auto; margin-top: .2rem; } .tip p { margin: 0; } /* CTA band */ .cta-band { background: var(--evergreen); color: var(--cream); text-align: center; } .cta-band h2 { color: var(--cream); } .cta-band .btn--primary { background: var(--hay); color: var(--charcoal); } .cta-band .btn--primary:hover { background: var(--cream); color: var(--evergreen); } .cta-band .btn--outline { background: transparent; color: var(--cream); border-color: var(--cream); } .cta-band .btn--outline:hover { background: var(--cream); color: var(--evergreen); } .cta-band__ctas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.2rem; } /* ---------- Hours table ---------- */ .hours-table { border-collapse: collapse; width: 100%; max-width: 46rem; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .hours-table caption { text-align: left; font-weight: 800; padding-bottom: .6rem; color: var(--evergreen); } .hours-table th, .hours-table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); } .hours-table thead th { background: var(--evergreen); color: var(--cream); } .hours-table tbody th { font-weight: 800; color: var(--evergreen); } .hours-table .hours-note { font-size: .9rem; color: var(--hay-ink); font-weight: 700; } /* Map */ .map-embed { border: 0; width: 100%; height: 22rem; border-radius: var(--radius); box-shadow: var(--shadow); display: block; } /* ---------- Forms ---------- */ .form-grid { display: grid; gap: 1rem; max-width: 40rem; } @media (min-width: 640px) { .form-grid--2col { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: span 2; } } .field label { display: block; font-weight: 800; margin-bottom: .3rem; color: var(--evergreen); } .field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--charcoal); padding: .65rem .8rem; border: 2px solid var(--evergreen); border-radius: 10px; background: #fff; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 0; } .hidden-field { position: absolute; left: -9999px; } .form-success { background: rgba(31, 77, 58, .12); border-left: 6px solid var(--evergreen); padding: 1rem 1.2rem; border-radius: 0 var(--radius) var(--radius) 0; font-weight: 700; } /* ---------- Footer ---------- */ .site-footer { background: var(--evergreen); color: var(--cream); margin-top: 0; } .site-footer a { color: var(--cream); } .site-footer a:hover { color: var(--hay); } .site-footer__grid { display: grid; gap: 1.6rem; padding-block: 2.4rem 1.4rem; } @media (min-width: 760px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } } .site-footer h2 { color: var(--hay-bright); font-family: var(--font-body); font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .6rem; } .site-footer address { font-style: normal; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: .35rem; } .social-links { display: flex; gap: .8rem; margin-top: .6rem; } .social-links a { display: inline-flex; width: 42px; height: 42px; border-radius: 999px; align-items: center; justify-content: center; background: rgba(251, 245, 234, .12); border: 1px solid rgba(251, 245, 234, .3); } .social-links a:hover { background: var(--hay); color: var(--evergreen); } .site-footer__legal { border-top: 1px solid rgba(251, 245, 234, .25); padding-block: 1rem 1.6rem; font-size: .92rem; text-align: center; } /* ---------- Reveal on scroll (JS adds .is-in; html.js gates initial state) ---------- */ @media (prefers-reduced-motion: no-preference) { html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; } html.js .reveal.is-in { opacity: 1; transform: none; } } @media print { .site-header, .season-banner, .site-footer .social-links, .btn { display: none !important; } }