/* ============================================================================ NAM YAM — design tokens ---------------------------------------------------------------------------- THE ONLY PLACE COLOURS, FONTS AND SPACING ARE DEFINED. To restyle the site, edit this file and nothing else. No hex value, font name or breakpoint may be written anywhere in main.css or index.html — they all read from the variables below. Source of truth: design/v3.0.1/tokens.css + design/v3.0.1/reference/ Names come from the design tokens file; geometry and motion come from the reference build. Kept 1-to-1 with design v3.0.1 by agreement. ============================================================================ */ :root { /* ---------- Surfaces ---------------------------------------------------- */ --ny-ink: #17100C; /* page background, contact brand column */ --ny-ink-deep: #130A06; /* hero scrim stops */ --ny-brown: #2A180F; /* invitation band */ --ny-teal: #102D2B; /* signature section, philosophy caption box */ --ny-book-back: #28160F; /* backing behind a menu image while it loads */ --ny-cream: #E8DBC3; /* menu section background */ --ny-paper: #F0E7D7; /* gallery + contact detail background */ /* ---------- Ink --------------------------------------------------------- */ --ny-white: #F5EDDF; /* text on dark */ --ny-body-dark: #4A3B2E; /* body copy on light */ --ny-address: #3F3226; /* contact address text */ --ny-label: #6B563E; /* small labels on --ny-paper 5.65 : 1 */ --ny-label-alt: #5F4C36; /* small labels on --ny-cream 5.97 : 1 */ --ny-social: #5C4A39; /* footer social links */ /* ---------- Accent ------------------------------------------------------ */ --ny-gold: #D0A45F; /* primary accent, buttons, links, logo */ --ny-gold-hi: #E8CD9A; /* logo gradient top stop, button hover */ --ny-gold-lo: #A8814B; /* logo gradient bottom stop */ --ny-bronze: #B47A3D; /* the accent line inside a heading */ --ny-red: #932B2E; /* eyebrows, elephant ear, focus on light */ /* Scrims — the hero and story bands sit over photography. Kept as tokens because they carry the text-legibility contract. */ --ny-scrim-hero: linear-gradient(90deg, rgba(19,10,6,.94) 0%, rgba(28,16,10,.70) 46%, rgba(19,10,6,.20) 100%), linear-gradient(0deg, rgba(19,10,6,.82) 0%, transparent 42%); --ny-scrim-hero-sm: linear-gradient(90deg, rgba(19,10,6,.98), rgba(31,16,9,.76) 68%, rgba(19,10,6,.25)), linear-gradient(0deg, #130A06 0%, transparent 45%); --ny-scrim-story: linear-gradient(90deg, rgba(19,10,6,.92) 0%, rgba(23,16,12,.62) 52%, rgba(19,10,6,.24) 100%); /* ---------- Translucent variants ---------------------------------------- Every borderline, veil and muted text tone used anywhere on the site. They live here rather than in the section files so that this really is the only place a colour is written. */ --ny-header-bg: rgba(23,14,9,.90); /* header once scrolled */ --ny-line-on-dark: rgba(233,220,195,.16); --ny-lightbox-bg: rgba(14,8,5,.94); --ny-veil: linear-gradient(0deg, rgba(18,10,6,.38), transparent 48%); --ny-sig-line: linear-gradient(90deg, transparent, rgba(208,164,95,.55) 22%, rgba(147,43,46,.55) 50%, rgba(208,164,95,.55) 78%, transparent); --ny-cue-line: linear-gradient(180deg, rgba(208,164,95,.9), rgba(208,164,95,0)); --ny-gold-80: rgba(208,164,95,.80); --ny-gold-75: rgba(208,164,95,.75); --ny-gold-60: rgba(208,164,95,.60); --ny-gold-55: rgba(208,164,95,.55); --ny-gold-42: rgba(208,164,95,.42); --ny-gold-40: rgba(208,164,95,.40); --ny-gold-34: rgba(208,164,95,.34); --ny-gold-28: rgba(208,164,95,.28); --ny-gold-16: rgba(208,164,95,.16); --ny-gold-14: rgba(208,164,95,.14); --ny-white-78: rgba(245,237,223,.78); --ny-white-72: rgba(245,237,223,.72); --ny-white-68: rgba(245,237,223,.68); --ny-white-62: rgba(245,237,223,.62); --ny-white-60: rgba(245,237,223,.60); --ny-white-50: rgba(245,237,223,.50); --ny-white-32: rgba(245,237,223,.32); --ny-dark-45: rgba(66,42,25,.45); --ny-dark-32: rgba(66,42,25,.32); --ny-dark-28: rgba(66,42,25,.28); --ny-dark-22: rgba(66,42,25,.22); --ny-dark-20: rgba(66,42,25,.20); --ny-dark-18: rgba(66,42,25,.18); --ny-dark-16: rgba(66,42,25,.16); --ny-dark-08: rgba(66,42,25,.08); --ny-frame-glow: rgba(240,231,215,.18); /* ---------- Type -------------------------------------------------------- */ --ny-serif: 'Lora', Georgia, 'Times New Roman', serif; --ny-sans: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif; /* Weights actually loaded. Do not use a weight that is not in this list — the browser will synthesise it and Vietnamese diacritics will smear. */ --ny-serif-regular: 400; --ny-serif-medium: 500; --ny-sans-light: 300; --ny-sans-regular: 400; --ny-sans-medium: 500; /* Type scale — mirrors design v3.0.1 exactly. The client set the hero lead (12.6px) as the floor for lowercase text. Uppercase labels are deliberately smaller with wide tracking. */ --ny-fs-h1: clamp(50.4px, 6.57vw, 113.4px); --ny-fs-h1-sm: clamp(44px, 13vw, 72px); --ny-fs-h2: clamp(44.1px, 5.4vw, 86.4px); --ny-fs-quote: clamp(38.7px, 4.68vw, 73.8px); --ny-fs-h3: clamp(22.5px, 2.03vw, 32.4px); --ny-fs-caption: clamp(17px, 1.56vw, 22.5px); --ny-fs-lead: 12.6px; --ny-fs-body: 12.6px; --ny-fs-small: 12.6px; --ny-fs-textlink: 9.9px; --ny-fs-label: 9px; --ny-fs-button: 9px; --ny-fs-brand: 7px; --ny-fs-cue: 7.2px; --ny-lh-tight: 1.04; --ny-lh-heading: 1.14; --ny-lh-body: 1.72; --ny-ls-eyebrow: .32em; --ny-ls-label: .28em; --ny-ls-button: .2em; --ny-ls-link: .15em; /* ---------- Layout ------------------------------------------------------ */ --ny-max: 1440px; --ny-pad: max(clamp(24px, 5vw, 88px), (100% - 1440px) / 2); --ny-pad-menu: max(clamp(88px, 5vw, 120px), (100% - 1440px) / 2); --ny-pad-sm: 22px; --ny-tap: 44px; /* minimum tap target */ /* Breakpoints are documented here but must be written literally in media queries — CSS custom properties cannot be used inside @media. phone <= 760px tablet <= 1000px */ /* ---------- Motion ------------------------------------------------------ */ --ny-ease: cubic-bezier(.2, .8, .2, 1); --ny-slow: 800ms; --ny-med: 620ms; --ny-fast: 280ms; /* ---------- Layers ------------------------------------------------------ */ --ny-z-header: 50; --ny-z-nav: 80; --ny-z-lightbox: 90; --ny-z-skip: 99; } /* Focus: gold on dark, red on the light sections. Gold on --ny-paper measures only 1.87 : 1, so it cannot be used there. */ :focus-visible { outline: 2px solid var(--ny-gold); outline-offset: 3px; } #philosophy :focus-visible, #gallery :focus-visible, #menu :focus-visible, #contact :focus-visible { outline-color: var(--ny-red); } @media (prefers-reduced-motion: reduce) { :root { --ny-slow: 1ms; --ny-med: 1ms; --ny-fast: 1ms; } }