/* ============================================================ Kairos Bakehouse Cream + forest-green brand, from the bakery's logo, menu and church. Warm editorial layout, botanical/serif, photography-led. ============================================================ */ /* Fonts (Marcellus + Spectral) are loaded via in index.html . */ /* ---- Tokens ---- Cream + forest-green palette. Rules use the role names below (--ink, --gold, --parchment), which map onto it, so the whole site re-themes from here. */ :root { --bg: #EBE4CF; /* page ground — warm cream */ --bg-2: #F2ECDC; /* raised / alternating section */ --bg-card: #F8F3E7; /* card / near-white cream */ --bg-deep: #E2DAC1; /* deeper cream — footer, feature bands */ --green: #3C4B2B; /* brand forest green — primary accent */ --green-2: #4E6035; /* lighter green */ --green-deep: #232E18; /* darkest green — headings */ --sage: #7E8A66; /* muted sage */ --ruby: #A8443A; /* closed / invalid state */ --text: #2C3320; /* primary text — deep green-brown */ --text-2: #575a41; /* secondary text */ --muted: #636048; /* tertiary / labels (4.5:1+ on every cream) */ /* role names used by the rules */ --ink: var(--bg); --ink-2: var(--bg-2); --ink-3: var(--bg-card); --ink-4: var(--bg-deep); --gold: var(--green); --gold-bright: var(--green-2); --gold-soft: #5f6f42; --parchment: var(--text); --parchment-2: var(--text-2); --line: rgba(60,75,43,0.24); /* green hairline */ --line-soft: rgba(60,75,43,0.13); --line-strong:rgba(60,75,43,0.42); --shadow-1: 0 2px 10px rgba(60,60,40,0.10); --shadow-2: 0 20px 46px -16px rgba(50,55,35,0.28); --shadow-glow: 0 0 34px -10px rgba(60,75,43,0.22); --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-io: cubic-bezier(0.77, 0, 0.175, 1); --font-display: 'Marcellus', 'Times New Roman', serif; --font-body: 'Spectral', Georgia, 'Times New Roman', serif; --font-mono: 'Courier Prime', 'Courier New', monospace; } /* ---- Reset / base ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ink); color: var(--parchment); font-family: var(--font-body); font-weight: 400; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); line-height: 1.65; letter-spacing: 0.003em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; margin: 0; color: var(--parchment); } a { color: inherit; text-decoration: none; } /* ---- Browser surfaces themed ---- */ ::selection { background: rgba(60,75,43,0.22); color: var(--green-deep); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; } html { scrollbar-color: var(--sage) var(--bg-deep); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--green-2), var(--sage)); border-radius: 20px; border: 2px solid var(--bg-deep); } ::-webkit-scrollbar-thumb:hover { background: var(--green); } /* ---- Skip link (WCAG 2.4.1 Bypass Blocks) ---- */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 18px; border-radius: 0 0 4px 4px; font-weight: 500; transition: top 180ms var(--ease-out); } .skip-link:focus { top: 0; } /* ---- Layout helpers ---- */ .wrap { width: min(100% - calc(var(--gutter) * 2), var(--maxw)); margin-inline: auto; } .section { padding-block: clamp(72px, 11vh, 148px); position: relative; } .eyebrow { /* used only as a tiny inscriptional label where the system calls for it */ font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.1rem; } /* Arched (church-window) image frame — native CSS rounded arch. Top corners each span half the width so they merge into a smooth dome. */ .arched { border-radius: 50% 50% 5px 5px / 33% 33% 5px 5px; } /* Hairline rule ornament */ .rule { display: flex; align-items: center; gap: 14px; color: var(--gold); font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase; } .rule::before, .rule::after { content: ""; height: 1px; background: var(--line); flex: 1; } .rule.single::before { display: none; } /* ============================================================ Header / nav ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color 300ms var(--ease-out), background 300ms var(--ease-out); } .site-header[data-scrolled="true"] { border-bottom-color: var(--line-soft); background: color-mix(in srgb, var(--ink) 92%, transparent); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 70px; } .brand { font-family: var(--font-display); font-size: 1.28rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); display: inline-flex; align-items: center; gap: 11px; } .brand-logo { height: 42px; width: auto; flex: none; display: block; } .footer-brand .brand-logo { height: 48px; } .nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: 0.92rem; color: var(--parchment-2); letter-spacing: 0.02em; position: relative; padding: 4px 0; transition: color 200ms var(--ease-out); } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--gold); transition: right 260ms var(--ease-out); } .nav-links a:hover { color: var(--parchment); } .nav-links a:hover::after { right: 0; } .nav-actions { display: flex; align-items: center; gap: 16px; } /* Live status pill */ .status { display: inline-flex; align-items: center; gap: 9px; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--parchment-2); padding: 7px 14px 7px 12px; border-radius: 100px; border: 1px solid var(--line); background: var(--ink-2); white-space: nowrap; } .status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); box-shadow: 0 0 0 0 rgba(0,0,0,0); } .status[data-open="true"] .dot { background: #77b06a; box-shadow: 0 0 12px 1px rgba(119,176,106,0.7); animation: pulse 2.6s var(--ease-out) infinite; } .status[data-open="false"] .dot { background: var(--ruby); box-shadow: 0 0 10px 0 rgba(168,68,58,0.5); } .status b { color: var(--parchment); font-weight: 500; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 12px 1px rgba(119,176,106,0.65); } 50% { box-shadow: 0 0 4px 0 rgba(119,176,106,0.35); } } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em; padding: 12px 22px; border-radius: 2px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: transform 160ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 240ms var(--ease-out); } .btn svg { width: 16px; height: 16px; } .btn:active { transform: scale(0.975); } .btn-primary { background: linear-gradient(180deg, var(--green-2), var(--green)); color: var(--bg-card); border-color: var(--green); box-shadow: var(--shadow-1); } .btn-primary:hover { background: linear-gradient(180deg, var(--green), var(--green-deep)); box-shadow: var(--shadow-2); } .btn-ghost { color: var(--green); border-color: var(--line-strong); background: transparent; } .btn-ghost:hover { border-color: var(--green); background: rgba(60,75,43,0.06); color: var(--green-deep); } .nav-toggle { display: none; } .mobile-menu { display: none; } /* ============================================================ Hero ============================================================ */ .hero { position: relative; overflow: hidden; padding-block: clamp(52px, 9vh, 104px) clamp(64px, 10vh, 120px); } /* stained-glass light behind hero */ .hero::before { content: ""; position: absolute; inset: -10% -10% auto -10%; height: 120%; background: radial-gradient(54% 46% at 82% 10%, rgba(255,253,245,0.75), transparent 70%), radial-gradient(46% 46% at 6% 28%, rgba(126,138,102,0.10), transparent 72%), radial-gradient(60% 52% at 96% 88%, rgba(60,75,43,0.06), transparent 72%); pointer-events: none; z-index: 0; } .hero .wrap { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .hero-place { font-family: var(--font-display); color: var(--gold); font-size: 0.82rem; letter-spacing: 0.32em; text-transform: uppercase; margin: -6px 0 28px; display: flex; align-items: center; gap: 12px; } .hero-place::before { content: ""; width: 34px; height: 1px; background: var(--line-strong); } .hero h1 { font-size: clamp(2.9rem, 2rem + 4.4vw, 5.4rem); line-height: 0.98; letter-spacing: -0.015em; margin-bottom: 24px; } .hero h1 .glow { color: var(--gold-bright); } .hero-lede { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); color: var(--parchment-2); line-height: 1.55; margin-bottom: 30px; font-weight: 300; max-width: 34ch; } .hero-lede em { color: var(--parchment); font-style: italic; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-hours { margin-top: 26px; font-size: 0.92rem; color: var(--muted); display: flex; align-items: center; gap: 10px; } .hero-hours b { color: var(--parchment-2); font-weight: 500; } /* Hero arch image */ .hero-media { position: relative; } .arch-frame { position: relative; } .arch-frame .arch-img { width: 100%; height: auto; aspect-ratio: 4 / 5.1; object-fit: cover; filter: saturate(1.03) contrast(1.02); border: 1.5px solid var(--gold); box-shadow: var(--shadow-2), 0 0 60px -20px rgba(60,75,43,0.4); } .hero-media .caption { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bg-card); background: color-mix(in srgb, var(--green-deep) 88%, transparent); backdrop-filter: blur(4px); padding: 7px 16px; border: 1px solid rgba(255,255,255,0.14); white-space: nowrap; } /* Marquee ribbon under hero */ .ribbon { border-block: 1px solid var(--line-soft); background: var(--ink-2); overflow: hidden; padding-block: 15px; } .ribbon .track { display: flex; gap: 48px; width: max-content; animation: slide 46s linear infinite; font-family: var(--font-display); color: var(--parchment-2); font-size: 0.94rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; } .ribbon .track span { display: inline-flex; align-items: center; gap: 48px; } .ribbon .track span::after { content: "✦"; color: var(--gold); font-size: 0.7rem; } @keyframes slide { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ribbon .track { animation: none; } } /* ============================================================ Section heading block ============================================================ */ .head { max-width: 60ch; margin-bottom: clamp(38px, 6vh, 64px); } .head h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.02; margin: 0; } .head p { color: var(--parchment-2); font-size: 1.075rem; margin: 18px 0 0; max-width: 56ch; font-weight: 300; } /* ============================================================ Menu ============================================================ */ .menu-group + .menu-group { margin-top: clamp(48px, 7vh, 88px); } .menu-label { display: flex; align-items: baseline; gap: 18px; margin-bottom: 30px; } .menu-label h3 { font-size: 1.5rem; letter-spacing: 0.02em; color: var(--gold-bright); } .menu-label .n { font-family: var(--font-display); color: var(--muted); font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; } .menu-label .bar { flex: 1; height: 1px; background: var(--line-soft); align-self: center; } .deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 30px); } .card { background: var(--ink-2); border: 1px solid var(--line-soft); overflow: hidden; position: relative; transition: transform 340ms var(--ease-out), border-color 340ms var(--ease-out), box-shadow 340ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: var(--shadow-2); } } .card-figure { position: relative; overflow: hidden; aspect-ratio: 4 / 5; } .card-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out), filter 500ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .card:hover .card-figure img { transform: scale(1.05); } } .card-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(20,16,12,0.6) 60%, rgba(20,16,12,0.95)); } .card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 20px 22px; z-index: 2; } .card-body h4 { font-size: 1.28rem; letter-spacing: 0; margin-bottom: 6px; color: #fff; } .card-body p { margin: 0; font-size: 0.9rem; color: rgba(244,239,225,0.82); line-height: 1.45; font-weight: 300; } .card-tag { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-bright); background: color-mix(in srgb, var(--ink) 66%, transparent); border: 1px solid var(--line); padding: 5px 10px; backdrop-filter: blur(3px); } .menu-note { margin-top: 40px; padding: 22px 26px; border: 1px solid var(--line-soft); background: var(--ink-2); display: flex; gap: 18px; align-items: flex-start; color: var(--parchment-2); font-size: 0.98rem; font-weight: 300; } .menu-note svg { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: 2px; } .menu-note b { color: var(--parchment); font-weight: 500; } /* Priced drink board — echoes the printed menu (mono prices on cream) */ .menu-board { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); margin-bottom: clamp(30px, 4vh, 48px); } .menu-col h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 1.55rem; color: var(--green-deep); letter-spacing: 0.02em; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--green); } .menu-col h3 .price-all { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-2); } .menu-list { list-style: none; margin: 0; padding: 0; } .menu-item { display: grid; grid-template-columns: 1fr auto; column-gap: 18px; row-gap: 3px; padding: 15px 2px; border-bottom: 1px solid var(--line-soft); } .menu-item .name { font-family: var(--font-display); font-size: 1.12rem; color: var(--text); letter-spacing: 0.01em; } .menu-item .price { font-family: var(--font-mono); font-size: 0.95rem; color: var(--green); align-self: baseline; font-variant-numeric: tabular-nums; } .menu-item .desc { grid-column: 1 / -1; color: var(--text-2); font-size: 0.9rem; line-height: 1.45; font-weight: 300; margin-top: 1px; } .menu-extras { display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: baseline; padding: 18px 24px; margin-bottom: clamp(8px, 2vh, 16px); background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 3px; } .menu-extras .k { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; color: var(--green); margin-right: 8px; } .menu-extras .v { color: var(--text-2); font-size: 0.92rem; } .menu-group.case { margin-top: clamp(44px, 6vh, 76px); } /* ============================================================ From scratch — video + process ============================================================ */ .scratch { background: var(--ink-2); border-block: 1px solid var(--line-soft); } .scratch-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 68px); align-items: center; } .scratch-video { position: relative; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-2); } .scratch-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .scratch-video figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 22px 16px; background: linear-gradient(transparent, rgba(20,16,12,0.85)); font-family: var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.76rem; color: #F4EFE1; } .scratch-copy h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); margin-bottom: 20px; } .scratch-copy p { color: var(--parchment-2); font-weight: 300; margin: 0 0 20px; } .syrups { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; } .syrups li { font-size: 0.85rem; color: var(--parchment-2); letter-spacing: 0.02em; border: 1px solid var(--line-soft); padding: 7px 13px; border-radius: 100px; background: var(--ink-3); } .syrups li::before { content: "•"; color: var(--gold); margin-right: 8px; } .process-strip { margin-top: clamp(40px, 6vh, 72px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 22px); } .process-strip figure { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line-soft); } .process-strip img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 800ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .process-strip figure:hover img { transform: scale(1.05); } } .process-strip figcaption { position: absolute; bottom: 12px; left: 14px; z-index: 2; font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--parchment); text-shadow: 0 1px 8px rgba(0,0,0,0.8); } /* ============================================================ The building ============================================================ */ .building-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(30px, 5vw, 70px); align-items: center; } .building-arch { position: relative; } .building-arch img { width: 100%; height: auto; aspect-ratio: 4 / 5.4; object-fit: cover; border: 1.5px solid var(--gold); box-shadow: var(--shadow-2), 0 0 60px -22px rgba(60,75,43,0.38); } .building-copy h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin-bottom: 22px; } .building-copy p { color: var(--parchment-2); font-weight: 300; margin: 0 0 18px; max-width: 54ch; } .building-copy p em { color: var(--parchment); font-style: italic; } .building-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; } .building-thumbs img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border: 1px solid var(--line-soft); } .church-illo { margin: 0 auto clamp(36px, 6vh, 72px); max-width: 680px; } .church-illo img { width: 100%; height: auto; display: block; } .kairos-def { margin: 24px 0; padding: 22px 26px; border: 1px solid var(--line-soft); border-radius: 3px; background: var(--bg-2); color: var(--text); font-style: italic; font-size: 1.02rem; line-height: 1.6; } .kairos-def .word { display: block; font-family: var(--font-display); font-style: normal; font-size: 1.18rem; color: var(--green-deep); letter-spacing: 0.02em; margin-bottom: 8px; } .kairos-def .word em { font-family: var(--font-mono); font-style: normal; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em; } /* ============================================================ Coffee ============================================================ */ .coffee { background: var(--ink-2); border-block: 1px solid var(--line-soft); } .coffee-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 68px); align-items: center; } .coffee-copy h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); margin-bottom: 20px; } .coffee-copy p { color: var(--parchment-2); font-weight: 300; margin: 0 0 18px; max-width: 50ch; } .coffee-copy .metric-line { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-family: var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.82rem; color: var(--gold); border: 1px solid var(--line); padding: 9px 16px; } .metric-line svg { width: 18px; height: 18px; flex: none; } .coffee-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 14px; } .coffee-mosaic figure { margin: 0; overflow: hidden; border: 1px solid var(--line-soft); position: relative; } .coffee-mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; transition: transform 800ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .coffee-mosaic figure:hover img { transform: scale(1.05); } } .coffee-mosaic .tall { grid-row: span 2; } .coffee-mosaic .tall img { aspect-ratio: auto; height: 100%; } /* ============================================================ Visit — hours + address ============================================================ */ .visit-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(34px, 6vw, 80px); align-items: start; } .hours-card { border: 1px solid var(--line); background: var(--ink-2); } .hours-head { padding: 22px 26px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .hours-head span { font-family: var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.82rem; color: var(--gold); } .hours-list { list-style: none; margin: 0; padding: 8px 0; } .hours-list li { display: flex; align-items: center; justify-content: space-between; padding: 13px 26px; font-size: 1rem; color: var(--parchment-2); transition: background 200ms var(--ease-out); } .hours-list li .d { letter-spacing: 0.02em; } .hours-list li .t { color: var(--parchment); font-variant-numeric: tabular-nums; } .hours-list li[data-today="true"] { background: linear-gradient(90deg, rgba(60,75,43,0.10), transparent); border-left: 2px solid var(--gold); } .hours-list li[data-today="true"] .d { color: var(--gold-bright); } .hours-list li[data-closed="true"] .t { color: var(--muted); } .visit-info h3 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin-bottom: 20px; } .visit-info > p { color: var(--parchment-2); font-weight: 300; max-width: 46ch; margin: 0 0 26px; } .visit-lines { list-style: none; margin: 0 0 30px; padding: 0; } .visit-lines li { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; } .visit-lines li:last-child { border-bottom: none; } .visit-lines svg { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 3px; } .visit-lines .k { font-family: var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; color: var(--muted); margin-bottom: 3px; } .visit-lines .v { color: var(--parchment); font-size: 1.05rem; } .visit-lines a.v:hover { color: var(--gold-bright); } .visit-cta { display: flex; flex-wrap: wrap; gap: 14px; } /* ============================================================ Contact ============================================================ */ .contact { background: var(--ink-2); border-block: 1px solid var(--line-soft); } .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(34px, 6vw, 80px); align-items: start; } .contact-intro h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin-bottom: 20px; } .contact-intro p { color: var(--parchment-2); font-weight: 300; max-width: 40ch; margin: 0 0 24px; } .contact-intro .metric-line { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; color: var(--gold); border: 1px solid var(--line); padding: 9px 16px; } .contact-form { border: 1px solid var(--line); background: var(--ink); padding: clamp(22px, 3vw, 34px); } .contact-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .contact-form .hp { display: none; } .field { margin-bottom: 18px; } .field label { display: block; margin-bottom: 8px; font-family: var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; color: var(--gold); } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--parchment); background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 2px; padding: 12px 14px; transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 200ms var(--ease-out); } .field textarea { resize: vertical; min-height: 120px; line-height: 1.55; } .field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233C4B2B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(60,75,43,0.18); background: var(--ink-3); } .field input:user-invalid, .field textarea:user-invalid { border-color: var(--ruby); box-shadow: 0 0 0 3px rgba(168,68,58,0.16); } /* Disabled form state */ .contact-form fieldset:disabled { opacity: 0.55; } .contact-form fieldset:disabled :is(input, select, textarea, button) { cursor: not-allowed; } .contact-form .btn { width: 100%; justify-content: center; margin-top: 6px; } .contact-soon { margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 2px; background: var(--ink-3); color: var(--parchment-2); font-size: 0.95rem; line-height: 1.5; } .contact-soon strong { color: var(--green-deep); font-weight: 600; } .contact-soon a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .contact-status { margin: 16px 0 0; padding: 14px 16px; border-radius: 2px; background: rgba(60,75,43,0.08); border: 1px solid var(--line-strong); color: var(--parchment); font-size: 0.95rem; } .contact-status b { color: var(--green-deep); font-weight: 600; } /* In the DOM from page load so screen readers announce it; no box until it has a message. */ .contact-status:not([data-state]) { margin: 0; padding: 0; border: 0; } .contact-status:focus { outline: none; } .contact-status[data-state="error"] { background: rgba(168,68,58,0.08); border-color: rgba(168,68,58,0.5); } .contact-status[data-state="error"] b { color: var(--ruby); } .contact-fineprint { margin: 14px 0 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5; } /* ============================================================ Footer ============================================================ */ .site-footer { border-top: 1px solid var(--line); background: var(--ink); padding-block: clamp(48px, 7vh, 84px) 40px; } .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 34px; align-items: flex-start; } .footer-brand .brand { font-size: 1.5rem; margin-bottom: 16px; } .footer-brand p { color: var(--muted); max-width: 34ch; font-size: 0.95rem; font-weight: 300; margin: 0; } .footer-brand .kairos-note { margin-top: 16px; color: var(--parchment-2); font-style: italic; font-size: 0.95rem; } .footer-cols { display: flex; gap: clamp(34px, 6vw, 80px); flex-wrap: wrap; } .footer-col h2 { font-family: var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.74rem; color: var(--gold); margin: 0 0 14px; font-weight: 400; } .footer-col a, .footer-col p { display: block; color: var(--parchment-2); font-size: 0.95rem; margin: 0 0 9px; font-weight: 300; } .footer-col a:hover { color: var(--gold-bright); } .footer-bottom { margin-top: clamp(40px, 6vh, 64px); padding-top: 22px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 0.84rem; } /* 404.html: the footer holds only this row */ .site-footer > .footer-bottom:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .footer-bottom a { color: var(--parchment-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out); } .footer-bottom a:hover { color: var(--gold-bright); text-decoration-color: currentColor; } /* ============================================================ Scroll reveal ============================================================ */ /* Hidden only while script.js can reveal it. JS off: (scripting: none) shows everything. JS on but script.js never ran: the failsafe keyframe shows everything after 4s. script.js sets html.reveals-armed right after wiring the observer, which disarms it. */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out); animation: reveal-failsafe 1ms linear 4s forwards; } html.reveals-armed .reveal { animation: none; } @keyframes reveal-failsafe { to { opacity: 1; transform: none; } } @media (scripting: none) { .reveal { opacity: 1; transform: none; } } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: 70ms; } .reveal[data-d="2"] { transition-delay: 140ms; } .reveal[data-d="3"] { transition-delay: 210ms; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .status[data-open="true"] .dot { animation: none; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 42px; } .hero-lede { max-width: 46ch; } .hero-media { max-width: 460px; margin-inline: auto; } .scratch-grid, .building-grid, .coffee-grid, .visit-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; } .building-arch { max-width: 420px; } .deck { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1240px) { .nav-links, .nav-actions .status { display: none; } .nav-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; background: transparent; border: 1px solid var(--line); color: var(--parchment); cursor: pointer; } .nav-toggle svg { width: 20px; height: 20px; } .mobile-menu { display: grid; position: fixed; inset: 70px 0 auto; z-index: 49; background: color-mix(in srgb, var(--ink) 97%, transparent); border-bottom: 1px solid var(--line); padding: 20px var(--gutter) 30px; gap: 4px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); } .mobile-menu[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; } .mobile-menu a { padding: 14px 4px; font-size: 1.1rem; color: var(--parchment); border-bottom: 1px solid var(--line-soft); font-family: var(--font-display); letter-spacing: 0.04em; } .mobile-menu .status { display: inline-flex; margin-top: 16px; align-self: flex-start; } } @media (max-width: 700px) { .menu-board { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 400px) { .nav { gap: 12px; } .nav-actions { gap: 10px; } .nav-actions .btn { padding-inline: 13px; } .nav-actions .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (max-width: 560px) { .deck { grid-template-columns: 1fr; } .process-strip { grid-template-columns: 1fr 1fr; } .building-thumbs { grid-template-columns: 1fr 1fr; } .hero-cta { gap: 12px; } .hero-cta .btn { flex: 1; justify-content: center; } .footer-top { flex-direction: column; } }