/* Namelok Farm — design system layer. Tokens + shared components. Pages are migrating from inline styles to these classes (home.html is the reference implementation); until a page migrates, its inline styles win over anything here, so additions to this file must stay safe for both worlds. Motion contract: elements hidden for scroll-reveal are only hidden when carries the .js class (set by an inline script before paint), so content is always visible without JavaScript. All animation respects prefers-reduced-motion. */ /* ---------- 1. Design tokens ---------- */ :root { /* Brand color */ --rust: #9A3B22; --rust-deep: #7C2F1B; --espresso: #2A1B12; --taupe: #6B5847; --taupe-soft: #8B7862; --gold: #D8A24F; --cream: #EFE6D8; --cream-deep: #E4D5BE; --parchment: #F7F1E4; --paper: #FFFDF8; --on-rust: #F7F1E4; --line: rgba(42, 27, 18, .14); --line-soft: rgba(42, 27, 18, .08); /* Type */ --font-serif: 'DM Serif Display', Georgia, serif; --font-sans: Inter, system-ui, -apple-system, sans-serif; /* Fluid display sizes */ --text-hero: clamp(34px, 7vw, 60px); --text-h2: clamp(24px, 5vw, 40px); --text-h3: clamp(20px, 4.5vw, 32px); --text-body: 16px; --text-small: 14px; /* Spacing scale (spacious marketing rhythm) */ --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --section-pad: clamp(56px, 10vw, 112px); --gutter: clamp(20px, 6vw, 64px); --container: 1320px; /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* Soft layered shadows (clear, not neumorphic) */ --shadow-sm: 0 1px 2px rgba(42, 27, 18, .06), 0 2px 8px rgba(42, 27, 18, .06); --shadow-md: 0 2px 6px rgba(42, 27, 18, .07), 0 12px 28px rgba(42, 27, 18, .11); --shadow-lg: 0 4px 10px rgba(42, 27, 18, .08), 0 24px 56px rgba(42, 27, 18, .16); /* Motion */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 450ms; } /* ---------- 2. Base + accessibility ---------- */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { overflow-x: hidden; } img, video { max-width: 100%; } ::selection { background: var(--gold); color: var(--espresso); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } a, button, label[for], summary { cursor: pointer; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- 3. Layout primitives ---------- */ .container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); } .eyebrow { font-size: 13px; letter-spacing: .2em; font-weight: 600; color: var(--rust); text-transform: uppercase; } .display { font-family: var(--font-serif); font-weight: 400; color: var(--espresso); line-height: 1.12; } .display em { font-style: italic; color: var(--rust); } /* ---------- 4. Buttons & links ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-sans); font-size: 15px; font-weight: 700; padding: 15px 28px; border-radius: var(--radius-sm); text-decoration: none; border: 1.5px solid transparent; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn-primary { background: var(--rust); color: var(--on-rust); } .btn-primary:hover { background: var(--rust-deep); } .btn-outline { border-color: var(--espresso); color: var(--espresso); font-weight: 600; } .btn-outline:hover { background: var(--espresso); color: var(--parchment); } .btn-outline-rust { border-color: var(--rust); color: var(--rust); } .btn-outline-rust:hover { background: var(--rust); color: var(--on-rust); } .btn-pill { border-radius: var(--radius-pill); padding: 10px 22px; font-size: 14px; } /* Arrow inside a .btn or .link-cta nudges right on hover */ .btn .arrow, .link-cta .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-spring); } .btn:hover .arrow, .link-cta:hover .arrow { transform: translateX(4px); } /* Text link with slide-in underline */ .link-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--rust); text-decoration: none; padding-bottom: 2px; background-image: linear-gradient(var(--rust), var(--rust)); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1.5px; transition: background-size var(--dur-base) var(--ease-out); } .link-cta:hover { background-size: 100% 1.5px; } /* ---------- 5. Cards & imagery ---------- */ .card { background: var(--paper); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-media { overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); } .card:hover .card-media img { transform: scale(1.04); } .frame { border-radius: var(--radius-md); overflow: hidden; } .frame img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Slow drift on hero imagery */ @keyframes ken-burns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.5%, 1%); } } .kenburns img { animation: ken-burns 22s var(--ease-out) infinite alternate; will-change: transform; } /* Quiet branded placeholder for photo slots awaiting real photos */ .photo-slot { position: relative; background: radial-gradient(120% 90% at 50% 0%, rgba(216, 162, 79, .14), transparent 60%), var(--cream-deep); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .photo-slot::before { content: 'N'; font-family: var(--font-serif); font-size: 26px; color: var(--taupe-soft); width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: .55; } .photo-slot::after { content: 'Photo coming soon'; font-family: var(--font-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe-soft); opacity: .7; } /* ---------- 6. Sticky glass nav ---------- */ .site-nav { position: sticky; top: 0; z-index: 900; background: rgba(247, 241, 228, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 2px solid var(--gold); transition: box-shadow var(--dur-base) var(--ease-out); } .site-nav.scrolled { box-shadow: var(--shadow-md); } .nav-bar { height: 76px; display: flex; align-items: center; justify-content: space-between; } .nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .nav-monogram { width: 36px; height: 36px; border-radius: 50%; background: var(--rust); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 18px; color: var(--on-rust); transition: transform var(--dur-base) var(--ease-spring); } .nav-brand:hover .nav-monogram { transform: rotate(-8deg) scale(1.06); } .nav-wordmark { font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--espresso); } .nav-link { position: relative; font-size: 14px; font-weight: 500; color: var(--taupe); text-decoration: none; padding: 12px 2px; transition: color var(--dur-fast) var(--ease-out); } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: var(--rust); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } .nav-link:hover { color: var(--espresso); } .nav-link:hover::after { transform: scaleX(1); } .nav-link[aria-current="page"] { color: var(--espresso); font-weight: 600; } .nav-link[aria-current="page"]::after { transform: scaleX(1); } /* ---------- 7. Mobile nav (checkbox-hack, no JS required) ---------- */ .nav-toggle-checkbox { display: none; } .nav-toggle-label { display: none; cursor: pointer; font-size: 28px; line-height: 1; color: var(--espresso); user-select: none; padding: 8px 10px; /* 44px touch target */ margin: -8px -10px; } .nav-menu { display: flex; align-items: center; gap: 36px; } /* 1000px, not 900: six links plus the CTA start crowding the wordmark before the viewport is narrow enough to feel like a phone. */ @media (max-width: 1000px) { .nav-toggle-label { display: block; } .nav-menu { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; position: absolute; top: 76px; left: 0; right: 0; background: var(--parchment); padding: 18px 24px 28px !important; border-bottom: 2px solid var(--gold); box-shadow: 0 12px 24px rgba(42, 27, 18, .12); z-index: 500; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .nav-toggle-checkbox:checked ~ .nav-menu { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .nav-menu .nav-links { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100%; } .nav-menu .nav-links a { display: block; padding: 12px 0; /* comfortable touch target */ border-bottom: 1px solid var(--line-soft); } .nav-menu > div[style*="gap:20px"] { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; width: 100%; } } /* ---------- 8. Scroll-reveal motion (JS-gated; see js/motion.js) ---------- */ html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--reveal-i, 0) * 70ms); } html.js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } } /* ---------- 9. WhatsApp ---------- */ /* WhatsApp green is used only on the icon and the floating button, where the affordance is worth more than palette purity. Inline buttons stay in the brand palette. */ :root { --whatsapp: #25D366; --whatsapp-deep: #1DA851; } .btn-whatsapp { background: var(--whatsapp); color: #fff; } .btn-whatsapp:hover { background: var(--whatsapp-deep); color: #fff; } .btn-whatsapp svg, .btn-wa-outline svg { width: 18px; height: 18px; flex-shrink: 0; } /* Per-product "ask about this one" link */ .btn-wa-outline { width: 100%; margin-top: 10px; border-color: var(--line); color: var(--taupe); font-size: 13.5px; font-weight: 600; padding: 10px 16px; } .btn-wa-outline svg { color: var(--whatsapp); } .btn-wa-outline:hover { border-color: var(--whatsapp); color: var(--espresso); background: rgba(37, 211, 102, .07); } /* Floating contact affordance — the dominant channel for this market */ .wa-float { position: fixed; right: clamp(16px, 4vw, 28px); bottom: clamp(16px, 4vw, 28px); z-index: 800; width: 56px; height: 56px; border-radius: 50%; background: var(--whatsapp); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); text-decoration: none; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); } .wa-float svg { width: 30px; height: 30px; } .wa-float:hover { transform: scale(1.07); box-shadow: var(--shadow-lg); } .wa-float::after { content: attr(data-label); position: absolute; right: calc(100% + 12px); white-space: nowrap; background: var(--espresso); color: var(--parchment); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-pill); opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .wa-float:hover::after, .wa-float:focus-visible::after { opacity: 1; transform: translateX(0); } @media (max-width: 600px) { .wa-float::after { display: none; } } /* ---------- 10. Inquiry list badge ---------- */ .nav-inquiry { position: relative; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--rust); text-decoration: none; padding: 9px 14px; border-radius: var(--radius-pill); background: rgba(154, 59, 34, .08); transition: background-color var(--dur-fast) var(--ease-out); } .nav-inquiry:hover { background: rgba(154, 59, 34, .16); } .nav-inquiry svg { width: 15px; height: 15px; } /* Pulse when an item is added, so the action has visible feedback */ @keyframes badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } } .nav-inquiry.bump { animation: badge-pop 420ms var(--ease-spring); } /* ---------- 11. Footer ---------- */ .footer-link { color: var(--taupe); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .footer-link:hover { color: var(--rust); } .social-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--cream); color: var(--espresso); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); } .social-btn:hover { background: var(--rust); color: var(--on-rust); transform: translateY(-2px); } .social-btn svg { width: 16px; height: 16px; }