/* * NILOSI design tokens. * * Every colour, size, radius, rule, duration and curve the storefront uses is * declared once here and referenced by name everywhere else. Rebranding means * editing this file, not hunting through components. * * Register: warm paper, charcoal ink, Fraunces over Inter, one moss accent * spent on one button per screen, every product on the same oat tile. * * Two rules govern the colour section and both are load-bearing. * * First, every text colour has been measured against the surface it actually * sits on, and the ratio is recorded beside it. WCAG 2.2 AA wants 4.5:1 for * body text, 3:1 for large text and 3:1 for the visible boundary of a control. * * Second, the page has exactly two grounds -- warm paper and one charcoal * stage -- plus the footer's deeper step. Tints are component fills (the * product tile, the four category tiles, the newsletter panel), never a * section ground. * * Every token NAME that shipped before is still declared, as a value or an * alias, so rules in checkout.css, shop.css and chrome.css that were not * rewritten keep resolving. */ :root { /* ---- grounds -------------------------------------------------------- */ --nd-paper: #F7F4EE; /* page ground */ --nd-white: #FFFFFF; /* inputs, drawer panel, search sheet, bar */ /* ---- tints: the product tile and the four category tiles ------------- Oat is THE product tile ground. Sage, clay and slate appear ONLY on the eight small category tiles. ink-500 sits only on paper, white and oat; on sage/clay/slate/tint-deep use ink-900. */ --nd-tint-oat: #EDE7DA; --nd-tint-sage: #E4E9E1; --nd-tint-clay: #F0E3DA; --nd-tint-slate: #E3E6E9; --nd-tint: var(--nd-tint-oat); /* alias used by every component */ --nd-tint-deep: #E3DBCB; /* tile hover ground, oat one step deeper */ /* ---- ink: charcoal, three steps ------------------------------------- */ --nd-ink-900: #1F1F1D; /* headings, prices, nav, card titles. 15.3:1 on paper, 13.6:1 on oat */ --nd-ink-700: #3A3A36; /* body. 10.4:1 on paper */ --nd-ink-500: #625F58; /* ledes, captions, labels, counts. 5.8:1 paper, 5.2:1 oat, 4.6:1 tint-deep */ /* ---- accent: moss, spent on one button per screen ------------------- */ --nd-accent: #2F5F4E; /* primary fill, links, FAQ keyline, progress hairline. 6.8:1 on paper */ --nd-accent-deep: #244B3E; /* hover / pressed, chip text. 9.2:1 paper, 7.1:1 on accent-soft */ --nd-accent-ink: #FFFFFF; /* text on accent. 7.4:1 on accent */ --nd-accent-soft: #E1E9E3; /* Sale badge and USA chip fill */ /* ---- rules: two weights ------------------------------------------- */ --nd-rule: #E2DDD3; /* hairlines */ --nd-rule-strong: #C8C1B4; /* chapter opener, closer top rule */ --nd-border-control: #6B6760;/* input / secondary button boundary. 4.4:1 (non-text, needs 3:1) */ /* ---- state -------------------------------------------------------- */ --nd-success: #2F6B47; /* in-stock, "added" notice. 6.0:1 on paper */ --nd-error: #A3261E; /* 7.1:1 */ --nd-error-soft: #F8E6E3; /* ---- the one dark band ------------------------------------------- */ --nd-stage: #1F1F1D; --nd-stage-ink: #F2EFE8; /* 14.6:1 on stage */ --nd-stage-ink-2: #B9B5AC; /* 7.6:1 on stage */ --nd-stage-accent: #C9B18C; /* numerals on stage (sand) 8.2:1 */ --nd-stage-rule: rgba(242, 239, 232, .16); --nd-stage-rule-strong: rgba(242, 239, 232, .32); /* ---- footer -------------------------------------------------------- */ --nd-footer-ground: #161614; --nd-footer-ink: #F2EFE8; /* 15.9:1 */ --nd-footer-ink-2: #C6C2B9; /* 9.4:1 */ --nd-footer-ink-3: #8F8B83; /* 4.6:1 */ /* ---- focus: two rings, both load-bearing. 2px ring, 3px offset ------ */ --nd-focus: var(--nd-ink-900); --nd-focus-halo: var(--nd-paper); --nd-focus-width: 2px; --nd-focus-offset: 3px; /* ---- aliases: every old name re-pointed at the new sheet ------------- */ --nd-bg: var(--nd-paper); --nd-surface: var(--nd-white); --nd-header-bg: var(--nd-paper); --nd-footer-bg: var(--nd-footer-ground); --nd-surface-alt: var(--nd-tint); --nd-ink: var(--nd-ink-900); --nd-heading-ink: var(--nd-ink-900); /* dark surfaces re-declare it */ --nd-text: var(--nd-ink-700); --nd-text-muted: var(--nd-ink-500); --nd-text-invert: var(--nd-white); --nd-border: var(--nd-rule); --nd-link: var(--nd-accent); --nd-link-hover: var(--nd-accent-deep); --nd-price: var(--nd-ink-900); --nd-in-stock: var(--nd-success); --nd-out-stock: var(--nd-ink-500); --nd-green: var(--nd-accent); --nd-green-deep: var(--nd-accent-deep); --nd-green-soft: var(--nd-accent-soft); --nd-green-line: #CBD6CD; --nd-g-100: var(--nd-accent-soft); --nd-g-200: #CBD6CD; --nd-g-300: #B9CDBF; --nd-g-500: #4C7A68; --nd-g-600: var(--nd-accent); --nd-g-700: var(--nd-accent-deep); --nd-g-800: #1B3A30; --nd-sand: var(--nd-stage-accent); --nd-sand-ink: #6E5A3A; /* ---- radii --------------------------------------------------------- */ --nd-r-sm: 2px; /* focus ring, marks */ --nd-r-md: 4px; /* ALL controls */ --nd-r-lg: 12px; /* tiles, media, drawer */ --nd-r-xl: 20px; /* hero media inner corners, film frame */ --nd-r-pill: 999px; /* cart count, chips only */ /* ---- elevation: nav drawer, search sheet, sticky bar. Nothing else. --- */ --nd-lift: 0 1px 2px rgba(31, 31, 29, .06), 0 18px 36px -16px rgba(31, 31, 29, .18); --nd-lift-up: 0 -1px 2px rgba(31, 31, 29, .06), 0 -12px 28px -12px rgba(31, 31, 29, .14); --nd-inset-hair: inset 0 0 0 1px; /* used as: box-shadow: var(--nd-inset-hair) */ --nd-shadow-sm: none; /* aliases kept so nothing shipped breaks */ --nd-shadow-md: var(--nd-lift); --nd-shadow-lg: var(--nd-lift); /* ---- spacing: the 4px scale ------------------------------------------ */ --nd-s-1: 4px; --nd-s-2: 8px; --nd-s-3: 12px; --nd-s-4: 16px; --nd-s-5: 24px; --nd-s-6: 32px; --nd-s-7: 48px; --nd-s-8: 64px; --nd-s-9: 96px; --nd-s-10: 128px; /* ---- vertical rhythm ------------------------------------------------- */ --nd-rhythm-band: clamp(4rem, 9vw, 8rem); /* 64 -> 128, sections */ --nd-rhythm-strip: clamp(2rem, 4vw, 3rem); /* 32 -> 48, thin bands */ --nd-rhythm-head: clamp(2rem, 4vw, 3.5rem); /* 32 -> 56, head to body */ /* ---- layout ---------------------------------------------------------- */ --nd-container: 1280px; --nd-content: 1200px; --nd-narrow: 720px; --nd-gutter: 20px; /* 32px from 768, 48px from 1240: see below */ --nd-header-h: 72px; --nd-header-h-sm: 56px; --nd-announce-h: 36px; /* ---- measure in em, never ch ----------------------------------------- */ --nd-measure: 36em; /* ~75 characters of Inter */ --nd-measure-short: 26em; /* ~54 characters */ /* ---- typography ------------------------------------------------------- Fraunces 400/500 (optical size axis, auto) for display and headings, Inter 400/500/600 for everything else. No font-variation-settings anywhere: font-optical-sizing: auto on html does the work. */ --nd-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif; --nd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --nd-font-mono: var(--nd-font); /* retired; keeps old rules valid */ --nd-fs-display: clamp(2.75rem, 1.6rem + 5vw, 5.75rem); /* 44 -> 92 hero h1 only */ --nd-fs-2xl: clamp(2rem, 1.35rem + 2.6vw, 3.5rem); /* 32 -> 56 section titles */ --nd-fs-3xl: var(--nd-fs-2xl); /* alias for legacy rules */ --nd-fs-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem); /* 24 -> 36 stage/FAQ/product */ --nd-fs-lg: 1.375rem; /* 22 -- routine step titles, category lead name */ --nd-fs-md: 1.125rem; /* 18 -- ledes, hero subhead, small category names */ --nd-fs-base: 1rem; /* 16 -- body, FAQ */ --nd-fs-sm: .9375rem; /* 15 -- nav, card titles, buttons, prices, footer links */ --nd-fs-xs: .8125rem; /* 13 -- captions, counts, announcement, legal, breadcrumbs */ --nd-fs-micro: .75rem; /* 12 -- .nd-label */ --nd-lh-display: .98; --nd-lh-tight: 1.04; --nd-lh-snug-title: 1.12; --nd-lh-snug: 1.25; --nd-lh-title: 1.45; --nd-lh-base: 1.6; --nd-lh-label: 1.4; --nd-lh-dense: 1.45; /* legacy alias */ --nd-track-micro: .12em; /* uppercase labels */ --nd-track-display: -.015em; /* hero line */ --nd-track-title: -.01em; /* section titles */ --nd-track-mark: -.02em; /* the wordmark */ /* Self-correcting optical tracking for legacy rules: negative above 16px, positive below. Uppercase must opt out via --nd-track-micro. */ --nd-track-optical: calc((1rem - 1em) * 0.05); --nd-fw-regular: 400; --nd-fw-medium: 500; --nd-fw-semibold: 600; --nd-fw-bold: 600; /* declared as 600 so untouched rules degrade */ --nd-fw-extrabold: 600; /* same */ /* ---- controls -------------------------------------------------------- */ --nd-control-h: 48px; --nd-control-h-sm: 40px; --nd-control-h-lg: 56px; --nd-tap-min: 44px; /* ---- motion: no overshoot anywhere ---------------------------------- */ --nd-dur-tick: 80ms; /* a press, must beat perception */ --nd-dur-snap: 140ms; /* a fill answering a pointer */ --nd-dur-travel: 240ms; /* the FAQ panel and the drawer */ --nd-dur-exit: 160ms; /* leaving is always faster than arriving */ --nd-dur-reveal: 600ms; /* the hero settle, once per page load */ --nd-ease-mech: cubic-bezier(.2, 0, 0, 1); /* arrives and stops dead */ --nd-ease-out: cubic-bezier(.16, 1, .3, 1); /* the settle */ --nd-ease-draw: linear; /* a measurement is uniform*/ --nd-ease: var(--nd-ease-mech); --nd-dur-fast: var(--nd-dur-tick); /* aliases AFTER the new tokens */ --nd-dur-base: var(--nd-dur-travel); } /* * Breakpoints are documented, not declared: a custom property cannot be used * inside a media query. Every @media in this theme uses one of these widths. * * 390px floor (360 must still fit) * 600px footer bar stacks below this * 768px tablet * 1024px laptop * 1240px gutter widens to 48px * 1280px container width, four-column catalogue */ @media (min-width: 768px) { :root { --nd-gutter: 32px; } } @media (min-width: 1240px) { :root { --nd-gutter: 48px; } } @media (prefers-reduced-motion: reduce) { :root { --nd-dur-tick: 0ms; --nd-dur-snap: 0ms; --nd-dur-travel: 0ms; --nd-dur-exit: 0ms; --nd-dur-reveal: 0ms; } } /* ========================================================================== THE PEN -- motion contract and shared keyframes. ========================================================================== 1. MOTION IS OPT-IN. Every animation declaration on this site lives inside @media (prefers-reduced-motion: no-preference). Never write motion in the open and switch it off afterwards. 2. NEVER AUTHOR A RESTING STATE AS HIDDEN. transform: scaleX(.001), stroke-dashoffset: 1 and opacity: 0 appear ONLY inside that block, and inside @supports where relevant. Everything outside those guards is the finished page. The homepage no longer uses the scroll-driven draws: every rule rests drawn. The keyframes stay because chrome and the product page may still reference them, and they cost nothing while unreferenced. FORBIDDEN: animating letter-spacing, height, margin or width on anything entering; reveals by changing display or position; parallax; counting numerals; cursor effects; will-change on rules. ========================================================================== */ :root{ --nd-hair: 1px; --nd-fade: 0px; /* An ABSOLUTE length, never a percentage. */ --nd-draw-len: 200px; } @media (max-width: 1023px){ :root{ --nd-draw-len: 110px; } } /* Inert until referenced, so these cost nothing outside the guards. */ @keyframes nd-draw-x{ from{ transform: scaleX(.001) } to{ transform: scaleX(1) } } @keyframes nd-draw-y{ from{ transform: scaleY(.001) } to{ transform: scaleY(1) } } @keyframes nd-ink { to{ stroke-dashoffset: 0 } } /* Animates to the element's OWN opacity, not to 1. */ @keyframes nd-appear{ to{ opacity: var(--nd-o, 1) } } @keyframes nd-fillin{ to{ fill-opacity: 1 } } /* Discrete: flips at the halfway point of its own 1ms duration. */ @keyframes nd-solid { to{ stroke-dasharray: none } } /* A BACKSTOP, NOT THE MECHANISM. Rule 2 above is the actual protection. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-timeline: none !important; animation-play-state: paused !important; } }