/* ===================================================================== PELICAN — DESIGN TOKENS: the one design system of the website, the store, the School of Fish and Lobster Dinner To Go pages, and the site editor's canvas. These are the approved store redesign's (Oct 2026): Instrument Sans + Instrument Serif, one deep-sea accent, refined neutrals, no emoji. Every colour, typeface, radius and shadow is defined here, and only here: - site.css (website pages, the shared header and footer) uses them; - the store and the event pages (static/store.html, static/events.html) load this file too, and their own CSS uses the same names; - the editor loads this file inside its canvas. Scope: .site and .site-page (the website, as in the prototype) and .pl-root (the of the store and event pages). Never :root, so the editor can load this file without the site's palette or fonts reaching its own chrome. Fonts are self-hosted (CSP font-src 'self'): Instrument Sans and Instrument Serif, SIL Open Font License 1.1, Google Fonts' latin subsets. Declared once, here, relative to this file, so every page asks for the same font URLs (the site's /_assets/fonts/...) and a font downloaded on one page is the browser's cached copy on the next: no flash of other fonts between the website and the store. CONTRAST (WCAG 2.0 AA; 4.5:1 text, 3:1 large text; checked Oct 7 2026) ink #101c1d 17.41 white 16.20 mist 14.82 cream ink-2 #4c5b5c 7.10 white 6.60 mist 6.17 sea-tint 6.04 cream ink-3 #5f6e6f 5.32 white 4.95 mist 4.63 sea-tint 4.53 cream sea #087687 5.31 white 4.94 mist 4.62 sea-tint 4.52 cream (links, eyebrows, the focus ring; #0a7f91 measured 4.38 on mist) deep #0b4651 10.45 white 9.72 mist 8.90 cream (headings in deep, the primary button's ground) danger #a8291f 7.00 white 6.51 mist 5.95 cream (errors; --lobster #c8372d is 5.20 on white but 4.42 on cream: never text on cream) white on deep 10.45 on deep-2 12.53 (buttons, the announcement link) cream on deep 8.90 on deep-2 10.66 (dark sections, the announcement) sea-tint-2 on deep 8.10 (eyebrows on dark grounds) field line #7f9396 3.22 white 3.00 mist (form field borders; WCAG 2.1 non-text 3:1, above the 2.0 floor) Photos: text over a photo sits on --shade-rgb at 0.72 or more (site.css .s-hero .shade), worst case a white photo: white 6.39, cream 5.44, sea-tint-2 4.95. ink-4 #9aa6a7 (2.50 on white) is for placeholders, disabled controls and hairline icons only, never for text a visitor must read. ===================================================================== */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(../fonts/InstrumentSans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(../fonts/InstrumentSans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/InstrumentSerif-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/InstrumentSerif-Italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metric-matched stand-ins for the two faces, used while (and if) the real ones load: Arial and Times New Roman scaled so a line of text takes the same width and height in either. Without them the swap re-wraps and re-heights the header and every heading (measured: a 35 px jump of the page under the header, CLS 0.02 on the class page). Numbers: the faces' own hhea and hmtx tables against Arial's and Times New Roman's (Liberation's, which are metric clones). */ @font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 102.5%; ascent-override: 94.6%; descent-override: 24.4%; line-gap-override: 0%; } @font-face { font-family: "Instrument Serif Fallback"; src: local("Times New Roman"), local("Liberation Serif"), local("Times"); size-adjust: 84.3%; ascent-override: 117.4%; descent-override: 36.8%; line-gap-override: 0%; } .site, .site-page, .pl-root { color-scheme: light; /* ---- type */ --font-ui: "Instrument Sans", "Instrument Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Instrument Serif", "Instrument Serif Fallback", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-base: 15px; --t-lg: 17px; --t-xl: 20px; /* ---- colour: refined neutrals, one deep-sea accent */ --paper: #ffffff; --mist: #f5f7f7; /* quiet panels, "Sea mist" sections, the footer */ --mist-2: #edf1f1; --hairline: #e6eaea; /* dividers, card edges */ --hairline-2: #d6dddd; /* stronger dividers, secondary button edges */ --ink: #101c1d; /* text, headings */ --ink-2: #4c5b5c; /* secondary text */ --ink-3: #5f6e6f; /* tertiary text, small labels */ --ink-4: #9aa6a7; /* placeholders, disabled: never body text */ --deep: #0b4651; /* the accent: primary buttons, dark sections */ --deep-2: #083943; /* its hover, the darkest ground */ --sea: #087687; /* links, eyebrows, focus */ --sea-tint: #e7f1f2; /* selected and informational grounds */ --sea-tint-2: #d3e6e9; --lobster: #c8372d; /* sold out (on white and mist only) */ --danger: #a8291f; /* error text */ --cream: #f3ecdf; /* text on deep, "Cream" sections */ --scrim: rgba(16, 28, 29, .46); --field-line: #7f9396; /* form field borders: 3:1 on white */ --ok: #0b6b52; /* "message sent" (6.50 on white) */ /* ---- shape and depth */ --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px; --shadow-float: 0 1px 2px rgba(16, 28, 29, .08), 0 4px 14px rgba(16, 28, 29, .12); --shadow-overlay: 0 24px 64px rgba(16, 28, 29, .20), 0 2px 8px rgba(16, 28, 29, .08); --shadow-dd: 0 12px 32px rgba(16, 28, 29, .14), 0 2px 6px rgba(16, 28, 29, .06); --ease: cubic-bezier(.2, .7, .2, 1); /* ---- focus: one ring everywhere (2px, 2px off the edge) */ --focus: #087687; --focus-on-dark: #f3ecdf; /* ---- the page frame every page shares: header, footer, website sections and the store all sit in it (site.css .wrap, the store's .layout). Gutters: 32px, 24px from 1099px down, 16px on phones. */ --frame: 1520px; /* ---- the website's names for the same system (site.css) */ --serif: var(--font-display); --sans: var(--font-ui); --muted: var(--ink-2); --link: var(--sea); --sbg: var(--mist); --card: #ffffff; --sline: var(--hairline); --sline-2: var(--hairline-2); --eyebrow: var(--sea); --on-dark-accent: #d3e6e9; /* eyebrows on dark grounds and photos */ --on-accent: #ffffff; /* text on --deep buttons */ --on-photo: #ffffff; /* headlines over photos */ --placeholder: #9aa6a7; /* the fish where a product has no photo */ /* the dark tint laid over photos, as r, g, b (used with alpha) */ --shade-rgb: 7, 38, 44; /* cream as r, g, b, for translucent text on dark */ --cream-rgb: 243, 236, 223; --note-ground: #fff3cd; /* the draft preview banner */ --note-ink: #4d3800; --note-line: #c99a00; --play-ground: rgba(255, 255, 255, .95); --shadow-play: 0 8px 26px rgba(0, 0, 0, .3); --caption-band: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .78) 40%); --nut-line: #c9a46a; --nut-ink: #6d4d13; --eve-line: #e4d5b7; --video-ground: #0d1f22; }