/* Lampstand Learning — design tokens & global styles */ :root { /* Brand palette — sampled directly from logo */ --bg: #faf3e0; --bg-soft: #fdf8ea; --bg-deep: #f0e7cd; --ink: #2c4a23; /* "LAMPSTAND" deep green */ --ink-soft: #4a5e3d; --ink-mute: #8a8a72; --line: rgba(44, 74, 35, 0.14); --line-soft: rgba(44, 74, 35, 0.07); /* Brand accents */ --green: #6a9b35; /* primary brand green */ --green-deep: #3d6322; --green-bright: #8cc63f; --green-soft: #c0d588; --teal: #2dab9c; --teal-deep: #1d877a; --amber: #f3c948; --amber-soft: #f7dc85; --blue: #3a8ec0; --blue-deep: #2c6e95; /* Legacy aliases (keep existing components working) */ --forest: var(--green-deep); --forest-deep: #243f17; --sage: var(--green); --terracotta: var(--amber); /* Type */ --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif; --serif-italic: "Instrument Serif", "Cormorant Garamond", Georgia, serif; --sans: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* Density */ --section-pad-y: clamp(72px, 9vw, 140px); --gutter: clamp(20px, 4vw, 56px); --max: 1320px; } /* Palette variants */ [data-palette="brand"], [data-palette="forest"] { --bg: #faf3e0; --bg-soft: #fdf8ea; --bg-deep: #f0e7cd; --ink: #2c4a23; --ink-soft: #4a5e3d; --ink-mute: #8a8a72; --green: #6a9b35; --green-deep: #3d6322; --green-bright: #8cc63f; --green-soft: #c0d588; --teal: #2dab9c; --teal-deep: #1d877a; --amber: #f3c948; --amber-soft: #f7dc85; --blue: #3a8ec0; --blue-deep: #2c6e95; --forest: #3d6322; --forest-deep: #243f17; --sage: #6a9b35; --terracotta: #f3c948; --line: rgba(44, 74, 35, 0.14); --line-soft: rgba(44, 74, 35, 0.07); } [data-palette="sunshine"], [data-palette="dusk"] { --bg: #fcf5dc; --bg-soft: #fefae8; --bg-deep: #f4e9c4; --ink: #4a3d1a; --ink-soft: #6b5a2d; --ink-mute: #9a8a6a; --green: #8cc63f; --green-deep: #5a8a2b; --green-bright: #a8d960; --green-soft: #d0e29c; --teal: #2dab9c; --teal-deep: #1d877a; --amber: #f3c948; --amber-soft: #f7dc85; --blue: #3a8ec0; --blue-deep: #2c6e95; --forest: #5a8a2b; --forest-deep: #3d6322; --sage: #8cc63f; --terracotta: #f3c948; --line: rgba(74, 61, 26, 0.14); --line-soft: rgba(74, 61, 26, 0.07); } [data-palette="meadow"], [data-palette="sky"] { --bg: #eef3e2; --bg-soft: #f6fae8; --bg-deep: #dde6c8; --ink: #1f3818; --ink-soft: #3a4f30; --ink-mute: #6f7866; --green: #6a9b35; --green-deep: #2f5a18; --green-bright: #8cc63f; --green-soft: #b0c578; --teal: #2dab9c; --teal-deep: #1d877a; --amber: #f3c948; --amber-soft: #f7dc85; --blue: #3a8ec0; --blue-deep: #2c6e95; --forest: #2f5a18; --forest-deep: #1f3a0f; --sage: #6a9b35; --terracotta: #2dab9c; --line: rgba(31, 56, 24, 0.14); --line-soft: rgba(31, 56, 24, 0.07); } [data-palette="twilight"], [data-palette="midnight"] { --bg: #1a2418; --bg-soft: #233022; --bg-deep: #131c12; --ink: #faf3e0; --ink-soft: #d0d6bc; --ink-mute: #909685; --green: #8cc63f; --green-deep: #6a9b35; --green-bright: #a8d960; --green-soft: #c0d588; --teal: #4dcfc0; --teal-deep: #2dab9c; --amber: #f3c948; --amber-soft: #f7dc85; --blue: #5da8d4; --blue-deep: #3a8ec0; --forest: #8cc63f; --forest-deep: #faf3e0; --sage: #8cc63f; --terracotta: #f3c948; --line: rgba(250, 243, 224, 0.14); --line-soft: rgba(250, 243, 224, 0.06); } /* Density */ [data-density="airy"] { --section-pad-y: clamp(96px, 11vw, 180px); } [data-density="regular"]{ --section-pad-y: clamp(72px, 9vw, 140px); } [data-density="compact"]{ --section-pad-y: clamp(56px, 7vw, 100px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; font-feature-settings: "ss01", "kern"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* clip (not hidden) so doesn't become the scroll container, which keeps the window as the canonical scroller for anchor scrolling */ overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* Typography utilities */ .serif { font-family: var(--serif); font-weight: 400; } .it { font-family: var(--serif-italic); font-style: italic; font-weight: 400; } .mono { font-family: var(--mono); font-feature-settings: "ss01"; } /* Icon badges — force inline SVGs to fill their box. iOS Safari collapses viewBox-only SVGs to zero width inside flex containers, which hid the hero + facilities icons on phones. */ .icon-badge svg { width: 100%; height: 100%; display: block; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; opacity: .6; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.01em; line-height: 1.02; } h1 { font-size: clamp(56px, 8.5vw, 132px); } h2 { font-size: clamp(40px, 5.5vw, 84px); } h3 { font-size: clamp(28px, 3.2vw, 48px); } h4 { font-size: clamp(22px, 2.2vw, 32px); } p { margin: 0; } .lede { font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.35; color: var(--ink-soft); } /* Layout helpers */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section-pad-y) 0; position: relative; } .section--tight { padding: calc(var(--section-pad-y) * 0.55) 0; } .divider { height: 1px; background: var(--line); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 999px; border: 1px solid transparent; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; text-decoration: none; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--forest); color: var(--bg-soft); } .btn--primary:hover { background: var(--forest-deep); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink); } .btn--amber { background: var(--amber); color: var(--forest-deep); } .btn--amber:hover { background: var(--amber-soft); } .btn .arrow { display: inline-block; width: 14px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg) translateY(2px); transition: transform .25s ease; } .btn:hover .arrow { transform: rotate(45deg) translateY(2px) translateX(2px); } /* Image slot — subtly striped placeholder with mono caption */ .slot { position: relative; background: repeating-linear-gradient(135deg, var(--bg-deep) 0 14px, var(--bg-soft) 14px 28px); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; color: var(--ink-soft); } .slot__cap { position: absolute; left: 14px; bottom: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--bg); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); max-width: calc(100% - 28px); } .slot__corner { position: absolute; right: 14px; top: 14px; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9px; color: var(--ink-mute); background: var(--bg-soft); } /* "Little light" — small glowing dot used as brand ornament, matched to logo sun */ .spark { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6cc, var(--amber) 55%, var(--amber-soft) 80%, transparent 100%); box-shadow: 0 0 24px var(--amber-soft), 0 0 8px var(--amber); vertical-align: middle; } /* Hills motif — used as section transition decoration */ .hills { display: block; width: 100%; height: auto; color: var(--green); } .hills--inverted { transform: scaleY(-1); } /* Marquee */ @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; background: var(--bg-soft); } .marquee__track { display: inline-flex; gap: 56px; animation: drift 60s linear infinite; } .marquee__item { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 36px); color: var(--ink); display: inline-flex; align-items: center; gap: 56px; } .marquee__item::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); } /* Reveal animation */ @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .reveal { opacity: 0; } .reveal.in { animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* Forms */ .input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 16px 0; font-family: var(--sans); font-size: 16px; color: var(--ink); outline: none; transition: border-color .2s ease; } .input:focus { border-color: var(--forest); } .input::placeholder { color: var(--ink-mute); } textarea.input { resize: vertical; min-height: 120px; line-height: 1.5; } /* Tag chip */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg-soft); } /* ─────────────────────────────────────────────────────────── Static-export interaction styles These drive the behaviour that React used to handle inline. They use !important to override the captured inline styles. ─────────────────────────────────────────────────────────── */ /* Sticky nav — scrolled state (toggled by script.js) */ header.nav-scrolled { padding: 12px 0 !important; background: color-mix(in oklab, var(--bg) 90%, transparent) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; border-bottom: 1px solid var(--line) !important; } .nav-links a:hover { color: var(--ink) !important; } /* "A day with us" timeline — active item state */ [data-day-btn] { padding-left: 4px !important; background: transparent !important; } [data-day-btn] > .mono { color: var(--ink-mute) !important; } [data-day-btn] p { max-height: 0 !important; opacity: 0 !important; } [data-day-btn] > span:last-child { background: transparent !important; } [data-day-btn].day-active { padding-left: 18px !important; background: var(--bg-deep) !important; } [data-day-btn].day-active > .mono { color: var(--amber) !important; } [data-day-btn].day-active p { max-height: 80px !important; opacity: 1 !important; } [data-day-btn].day-active > span:last-child { background: var(--amber) !important; } /* "A day with us" — picture-side prev/next arrows */ .day-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(250, 243, 224, 0.92); color: var(--forest); border: 1px solid var(--line); cursor: pointer; z-index: 3; box-shadow: 0 8px 22px -10px rgba(42, 74, 35, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .day-arrow--prev { left: 14px; } .day-arrow--next { right: 14px; } .day-arrow:hover { background: var(--bg-soft); transform: translateY(-50%) scale(1.07); box-shadow: 0 12px 28px -10px rgba(42, 74, 35, 0.55); } .day-arrow:active { transform: translateY(-50%) scale(0.95); } /* Address + footer link hovers (were inline JS handlers) */ #visit a.serif:hover { color: var(--green) !important; } footer a:hover { color: var(--amber-soft) !important; } /* Register banner hover lift */ .section--tight a[href="#register"]:hover { transform: translateY(-3px) !important; box-shadow: 0 28px 60px -24px rgba(42, 74, 35, 0.45) !important; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; animation: none !important; } .marquee__track { animation: none !important; } }