/* * Design tokens — the single source of truth for how this page looks. * * These used to be literals scattered across four stylesheets and three JS * modules, so changing the palette meant editing six files. The canvas modules * (hearts, lines, grass) now read these same values at startup via js/tokens.js, * which is why the colours live here and not in the scripts that draw them. */ :root { /* ---- Paper -------------------------------------------------------- The cream ground stays. Surveying French breeder sites, cream and beige grounds (#efebdc, #fff8e5, #e0ddc5) are the local idiom where UK and Nordic kennels reach for white — so this is already speaking the right language and is worth building around, not replacing. */ --color-bg: rgb(244, 238, 234); --color-ink: #3a2f2a; --color-ink-soft: #796961; /* 4.56:1 on the ground — #7a6a62 was 4.49 */ --color-paper: #ffffff; --color-surface: #FBF8F5; /* a card lifted just off the ground */ --color-ink-deep: #241C18; /* display headings, pedigree data */ --color-rule: #E2D8D0; /* hairlines and table rules */ /* The heart red is a DRAWING colour — it belongs to the hearts and the lineage lines, where contrast rules do not apply because nothing in it is text. Used as type it is 3.63:1 on white, below the 4.5 that body text needs. So text gets its own darker cut of the same hue and the hearts keep theirs: nothing on the canvas changes. */ --color-heart-text: #B9464B; /* 5.20:1 on white, 4.52:1 on the ground */ /* ---- The four colour roles ---------------------------------------- What separates the credible breeder sites from the amateur ones is not which colours they use — the best cocker site in France runs a pink primary — but whether each colour means something. So: field = institution pedigree, structure, navigation rosette = honours titles, cotation, CACS. Nothing else. hearts = family the lineage layer, below, unchanged --dog-color = identity each dog's own, the only chroma on its page Deep field green because the grass and the vine are already green: promoting that green to the structural colour turns the hand-drawn ornaments into the identity system rather than decoration sitting beside it. It is also the correct register for an English gundog, and nothing else in the category uses it — every French cocker site surveyed is blue, pink, teal or brown. */ --color-field: #2F4A3C; --color-field-lo: #4A6B58; /* Gold is what the breeder-design trade thinks premium looks like, so scarcity is the only thing keeping it from reading that way. Titles and pedigree links only. */ --color-rosette: #B08442; /* ---- Hearts (js/drawings.js) -------------------------------------- Six layers ripple outward through these in order. */ --heart-1: #E4565D; --heart-2: #EDA6C6; --heart-3: #DC2624; --heart-4: #E4565D; --heart-5: #EDA6C6; --heart-6: #DC2624; /* Line from a heart up to each parent. */ --line-parent-1: #E4565D; --line-parent-2: #EDA6C6; --line-parent-3: #DC2624; --line-parent-4: #EDA6C6; --line-parent-5: #E4565D; --line-parent-border: #EDA6C6; /* Fallback for a child line when the dog has no colour of its own. */ --line-child-1: #52C755; --line-child-2: #43B446; --line-child-3: #33A036; --line-child-4: #248D27; /* ---- Grass and soil (js/grassV2GPT.js) ---------------------------- */ --grass-base: darkgreen; --grass-tip: lightgreen; --soil-top: #8B5A2B; --soil-bottom: #A07850; /* ---- Dog bubbles (js/carouselBuilder.js) -------------------------- Alpha applied to each dog's own colour. */ --bubble-shadow-offset-y: 5; --bubble-shadow-blur: 5; --bubble-shadow-alpha: 0.5; --bubble-fill-alpha: 0.3; --bubble-outer-border-alpha: 0.5; --bubble-inner-border-alpha: 0.8; /* ---- Type --------------------------------------------------------- Fraunces for display, Karla for everything else. Both SIL OFL, both self-hosted — the site loads nothing from a CDN, which is also what lets the CSP stay strict. This replaced Archer Book, which was Hoefler & Co retail: serving the raw .otf publicly was unlicensed webfont distribution and handed any visitor the installable desktop file. Body text was `system-ui`, meaning the site had no typographic identity at all on most visits. Fraunces is variable on four axes, two of which are the reason it was chosen: SOFT rounds the terminals, WONK swaps in the canted, slightly odd alternates. That is a dial for how whimsical the page is, in ONE typeface — so the stud dossier can be straight and serious and the litter pages can be soft and hand-made without introducing a second voice. See --wonk-* below. */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* The two ends of the dial. Apply with font-variation-settings. Anything that has to be believed uses --wonk-formal; anything that is meant to feel hand-made uses --wonk-warm. */ --wonk-formal: 'SOFT' 0, 'WONK' 0; --wonk-warm: 'SOFT' 60, 'WONK' 1; --text-sm: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); --text-xl: clamp(2rem, 1.4rem + 2.6vw, 3.75rem); /* ---- Spacing ------------------------------------------------------ */ --space-xs: 0.35rem; --space-sm: 0.75rem; --space-md: 1.5rem; --space-lg: 3rem; --space-xl: 5rem; /* ---- Motion ------------------------------------------------------- Three durations, so transitions feel deliberate rather than assembled one rule at a time. */ --motion-fast: 0.2s; --motion-base: 0.3s; --motion-slow: 0.5s; /* The spotlight. --motion-vanish is the others fading OUT when you hover a photo; --motion-return is them fading back IN when you leave. */ --motion-vanish: 3.5s; --motion-return: 1.5s; /* A full half-second after you hover before anything starts fading out, so brushing past a photo on the way to another leaves the row untouched. */ --motion-vanish-delay: 0.5s; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* The others don't drop away — they creep. ease-IN barely moves at first, so the scene lingers almost intact, then dissolves late. ease-out (fast first, then coasting) does the opposite and never feels like a creep. */ --ease-creep: cubic-bezier(0.35, 0, 0.6, 0.5); /* ---- Stacking ----------------------------------------------------- Every z-index on the page, in one place and in order. */ --z-bg: -1; /* hearts and connector lines, behind everything */ --z-card: 1; /* the active photo in a carousel */ --z-chrome: 2; /* name tags, carousel arrows, the top bar + branch */ --z-vine: 1; /* the side vine, UNDER the branch so they join */ --z-handle: 40; /* the bird, over everything but the lightbox */ --z-grass: 30; /* grass, drawn over the page foot */ --z-modal: 1000; /* the zoom lightbox */ /* ---- Layout ------------------------------------------------------- The phone breakpoint. Also read by js/tokens.js so the scripts and the stylesheets can never disagree about where it is. */ /* Framing happens at three sizes, because a crop that works on a desktop oval can fail on a phone circle: desktop > 1100px --focus tablet 641px – 1100px --focus-tablet phone <= 640px --focus-phone --bp-phone is the desktop/narrow boundary and keeps its old name because js/tokens.js and carouselBuilder read it. --bp-phone-max is the new one. */ /* The branch under the top bar, and how far the sticky bar plus that branch reach down the page. The vine slider on the litter pages starts below this, so its bird is not decapitated by the bar at scroll top. */ --vine-border-height: 40px; --nav-height: 3.5rem; --bp-phone: 1100px; --bp-phone-max: 640px; --bubble-max: 300px; } /* Two subsets each, split on unicode-range the way Google Fonts splits them: a visitor reading French only ever downloads the latin file. latin-ext is fetched lazily, and only if a name on the page needs it — which for a pedigree full of continental European kennel affixes is worth having. */ @font-face { font-family: 'Fraunces'; src: url('../font/fraunces-latin.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; 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: 'Fraunces'; src: url('../font/fraunces-latin-ext.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; 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: 'Karla'; src: url('../font/karla-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; 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: 'Karla'; src: url('../font/karla-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; 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; } /* The bone name tags are the most hand-made thing on the page, so they sit at the warm end of the dial. boneV13.svg asks for this family by name. */ .dog-name, text[id^="dogName"] { font-variation-settings: var(--wonk-warm); } /* ---- Navigation feel --------------------------------------------------- Both of these are progressive enhancement: browsers without them simply jump, which is what the site did before. */ html { /* Anchor links glide instead of teleporting. js/customSlider.js passes 'instant' when dragging the vine, so the handle stays 1:1 with the pointer rather than easing behind it. */ scroll-behavior: smooth; } /* Cross-document view transitions: moving between the étalon page and a litter page cross-fades rather than flashing white. This is the platform's own MPA transition — no framework, no router, no JavaScript. Browsers that do not support it navigate exactly as before. */ @view-transition { navigation: auto; } /* The top bar is on every page, so it is named and therefore MORPHS between them instead of fading out and back in. Without this the whole page cross-fades including the bar, and the bar visibly blinks. */ .site-nav { view-transition-name: site-nav; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }