/** * Design tokens. THE ONE FILE THAT HOLDS DESIGN VALUES. * * Source: the "graphique website img" static build (Seth, 12 October 2026), * re-expressed as fluid tokens. Every size is a clamp() between a 360px and a * 1440px viewport. No section, template or stylesheet outside this file may use * a literal colour, font size or spacing value. * * Root is 100% (1rem = 16px), so text scales with the visitor's browser setting. * * Contrast, measured 12 October 2026: * white on --brand-accent 4.86:1 (the design's #ff0068 is 3.85:1, so * buttons and small pink text use the * darker accent; #ff0068 survives as * --brand-pop on large headings only) * white on --brand-secondary 5.18:1 * --ink-muted on --surface 5.58:1, on --surface-blush 5.02:1 * --footer-ink on --footer-bg 10.81:1, --footer-pop on --footer-bg 4.73:1 */ /* Fonts, self-hosted (SIL Open Font License). Fredoka One: the design's display face, h1 only (single weight). Fredoka and Quicksand: variable 300–700 from Google Fonts, so headings and emphasis can sit at 500 (Seth, 12 October 2026: 700 read too strong). The latin-ext Quicksand file carries the peso sign. */ @font-face { font-family: 'Fredoka One'; src: url('../fonts/fredoka-one.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fredoka'; src: url('../fonts/fredoka-var-latin.woff2') format('woff2'); font-weight: 300 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: 'Fredoka'; src: url('../fonts/fredoka-var-latin-ext.woff2') format('woff2'); font-weight: 300 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+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Quicksand'; src: url('../fonts/quicksand-var-latin.woff2') format('woff2'); font-weight: 300 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: 'Quicksand'; src: url('../fonts/quicksand-var-latin-ext.woff2') format('woff2'); font-weight: 300 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+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- Brand ------------------------------------------------------------- primary deep navy ink: headings, dark text, outline buttons accent the pink action colour: primary buttons, links, prices pop the design's bright pink, large display type only (3.85:1) secondary the purple: "Message us", step badges, focus rings */ --brand-primary: #1b1055; --brand-primary-hover: #2c1b5b; --brand-accent: #e0005a; --brand-accent-hover: #c2004e; --brand-pop: #ff0068; --brand-secondary: #7545ff; --brand-secondary-hover: #6131df; --brand-support: #1f7a4d; --brand-support-hover: #17633e; --brand-support-on-dark: #9fe0b4; --brand-tint: #e1d2ff; --brand-tint-soft: #f4effd; --brand-tint-pink: #ffe5ef; --brand-tint-lilac: #eee5ff; --brand-sun: #ffe6a0; --brand-gold: #f1c75c; --brand-danger: #b9004b; /* --- Surfaces and ink -------------------------------------------------- */ --surface: #fffefa; --surface-alt: #f9f4ee; --surface-blush: #fceef5; --surface-rose: #ffedf5; --surface-note: #fff5c9; --surface-note-fold: #efdf9e; --ink: #1b1055; --ink-muted: #686579; --hairline: #e4d9fa; --hairline-strong: #d6c2ff; --hairline-soft: rgba(117, 69, 255, 0.08); --white: #fff; --scrim: rgba(35, 18, 64, 0.52); --footer-bg: #2c1b5b; --footer-ink: #e3d7f4; --footer-pop: #ff4d8d; --footer-line: rgba(255, 255, 255, 0.22); --footer-chip: rgba(255, 255, 255, 0.14); /* --- Typography --------------------------------------------------------- display Fredoka One, h1 only heading Fredoka at --heading-weight, h2 to h6 and display labels body Quicksand; --weight-strong is every bold: nav, buttons, labels */ --font-display: 'Fredoka One', 'Fredoka', 'Segoe UI', Arial, sans-serif; --font-heading: 'Fredoka', 'Segoe UI', Arial, sans-serif; --font-body: 'Quicksand', 'Segoe UI', Arial, sans-serif; --heading-weight: 500; --weight-strong: 500; --text-hero: clamp(2.25rem, 1.792rem + 2.037vw, 3.625rem); --text-h1: clamp(2.125rem, 1.708rem + 1.852vw, 3.375rem); --text-h2: clamp(1.875rem, 1.604rem + 1.204vw, 2.688rem); --text-h3: clamp(1.125rem, 1.042rem + 0.3704vw, 1.375rem); --text-h4: clamp(1rem, 0.9375rem + 0.2778vw, 1.188rem); --text-lead: clamp(1rem, 0.9688rem + 0.1389vw, 1.094rem); --text-body: clamp(0.9375rem, 0.9167rem + 0.09259vw, 1rem); --text-small: clamp(0.8125rem, 0.7917rem + 0.09259vw, 0.875rem); --text-xs: clamp(0.7188rem, 0.6979rem + 0.09259vw, 0.7812rem); /* Form fields on touch screens: iOS Safari zooms into any field under 16px. */ --text-input: max(1rem, var(--text-small)); --text-eyebrow: clamp(0.6875rem, 0.6667rem + 0.09259vw, 0.75rem); --text-note: clamp(1.125rem, 1.021rem + 0.463vw, 1.438rem); --text-price: clamp(1.188rem, 1.104rem + 0.3704vw, 1.438rem); --heading-line-height: 1.08; --text-line-height: 1.55; --heading-tracking: -0.02em; /* Headings are flat: no outline, no drop shadow (Seth, 12 October 2026). */ /* --- Spacing ------------------------------------------------------------ */ --space-3xs: clamp(0.25rem, 0.2083rem + 0.1852vw, 0.375rem); --space-2xs: clamp(0.5rem, 0.4167rem + 0.3704vw, 0.75rem); --space-xs: clamp(0.75rem, 0.6667rem + 0.3704vw, 1rem); --space-s: clamp(1rem, 0.875rem + 0.5556vw, 1.375rem); --space-m: clamp(1.25rem, 1.042rem + 0.9259vw, 1.875rem); --space-l: clamp(1.75rem, 1.417rem + 1.481vw, 2.75rem); --space-xl: clamp(2.5rem, 2rem + 2.222vw, 4rem); --space-2xl: clamp(3.5rem, 2.667rem + 3.704vw, 6rem); --section-space-s: clamp(2.75rem, 2.167rem + 2.593vw, 4.5rem); --section-space-m: clamp(3.5rem, 2.583rem + 4.074vw, 6.25rem); --section-space-l: clamp(4.5rem, 3.292rem + 5.37vw, 8.125rem); --space-gutter: clamp(1.25rem, 0.8333rem + 1.852vw, 2.5rem); /* Heights of the gingham paper bands (menu trim, footer trim) and of a torn paper edge on a section. */ --band-trim: clamp(3rem, 1.708rem + 5.741vw, 6.875rem); --band-edge: clamp(1.375rem, 0.8333rem + 2.407vw, 3rem); /* --- Layout ------------------------------------------------------------- */ --container: 71.25rem; --container-wide: 90rem; --container-text: 40rem; --header-height: 4.5rem; --logo-width: clamp(5.75rem, 5.167rem + 2.593vw, 7.5rem); --footer-logo-width: clamp(8.25rem, 7.917rem + 1.481vw, 9.25rem); --icon-size: 1.3rem; --tap-target: 2.75rem; --badge-size: 1.1rem; --step-icon-size: clamp(4.75rem, 4.333rem + 1.852vw, 5.5rem); --step-badge-size: 1.75rem; /* --- Radii -------------------------------------------------------------- */ --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --radius-xl: 1.5rem; --radius-pill: 100rem; --radius-arch: 50% 50% 0.75rem 0.75rem; /* --- Borders ------------------------------------------------------------ */ --border-hair: 1px; --border-thin: 2px; --border-card: 4px; --border-photo: 6px; /* --- Shadows (purple-tinted, from the design) --------------------------- */ --shadow-sm: 0 2px 4px rgba(36, 17, 70, 0.08); --shadow-md: 0 5px 12px rgba(124, 89, 182, 0.14); --shadow-lg: 0 20px 60px rgba(33, 16, 72, 0.25); --shadow-header: 0 2px 8px rgba(42, 25, 85, 0.07); --shadow-button: 0 4px 7px rgba(235, 0, 85, 0.17); --shadow-button-hover: 0 6px 14px rgba(235, 0, 85, 0.21); --shadow-button-purple: 0 5px 10px rgba(93, 43, 191, 0.22); --shadow-outline-button: 0 3px 6px rgba(83, 60, 168, 0.1); --shadow-paper: 3px 5px 0 #eee7df; --shadow-note: 2px 12px 20px -8px rgba(103, 83, 43, 0.21); /* --- Motion ------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-normal: 240ms; --duration-marquee: 38s; --lift: -3px; /* --- Texture: gingham, tape, torn paper, sparkles ----------------------- */ --gingham-lilac: rgba(170, 135, 236, 0.27); --gingham-pink: rgba(233, 151, 186, 0.5); --gingham-tape: rgba(169, 136, 208, 0.38); --tape-bg: #e4d5f7; --gingham-size: 2.5rem; --tape-size: 0.75rem; --torn: polygon(0 1.5%, 3% 1%, 5% 2%, 8% 0.7%, 11% 1.5%, 14% 0, 18% 1%, 21% 0.5%, 25% 1.8%, 29% 0.6%, 33% 1.5%, 37% 0, 42% 1.2%, 46% 0.5%, 50% 1.5%, 54% 0.4%, 59% 1.2%, 64% 0, 69% 1%, 73% 0.5%, 78% 1.4%, 83% 0, 88% 1%, 93% 0.5%, 97% 1.5%, 100% 0.7%, 100% 98.5%, 97% 99%, 94% 98%, 90% 99.5%, 85% 98.4%, 80% 100%, 75% 98.8%, 70% 99.5%, 65% 98%, 60% 99.4%, 55% 98.6%, 50% 100%, 45% 99%, 40% 99.7%, 35% 98.4%, 30% 99.6%, 25% 98.8%, 20% 100%, 15% 99%, 10% 99.6%, 5% 98.5%, 0 99%); --torn-edge-mobile: polygon(0 0.4%, 6% 0.1%, 12% 0.5%, 18% 0, 25% 0.45%, 32% 0.1%, 39% 0.5%, 46% 0, 53% 0.4%, 60% 0.05%, 67% 0.5%, 74% 0.1%, 81% 0.45%, 88% 0, 94% 0.4%, 100% 0.1%, 100% 99.6%, 94% 99.9%, 88% 99.5%, 81% 100%, 74% 99.55%, 67% 99.9%, 60% 99.5%, 53% 100%, 46% 99.6%, 39% 99.95%, 32% 99.5%, 25% 99.9%, 18% 99.55%, 12% 100%, 6% 99.6%, 0 99.9%); /* Torn top, straight bottom: for a band that sits flush on the next one. */ --torn-top: polygon(0 1.5%, 3% 1%, 5% 2%, 8% 0.7%, 11% 1.5%, 14% 0, 18% 1%, 21% 0.5%, 25% 1.8%, 29% 0.6%, 33% 1.5%, 37% 0, 42% 1.2%, 46% 0.5%, 50% 1.5%, 54% 0.4%, 59% 1.2%, 64% 0, 69% 1%, 73% 0.5%, 78% 1.4%, 83% 0, 88% 1%, 93% 0.5%, 97% 1.5%, 100% 0.7%, 100% 100%, 0 100%); --torn-top-mobile: polygon(0 0.4%, 6% 0.1%, 12% 0.5%, 18% 0, 25% 0.45%, 32% 0.1%, 39% 0.5%, 46% 0, 53% 0.4%, 60% 0.05%, 67% 0.5%, 74% 0.1%, 81% 0.45%, 88% 0, 94% 0.4%, 100% 0.1%, 100% 100%, 0 100%); --torn-wave: polygon(0 35%, 3% 50%, 6% 30%, 9% 45%, 12% 20%, 16% 38%, 19% 30%, 23% 50%, 27% 28%, 31% 45%, 35% 20%, 39% 32%, 43% 24%, 47% 45%, 51% 26%, 55% 40%, 59% 22%, 63% 35%, 67% 18%, 71% 36%, 75% 25%, 79% 44%, 83% 22%, 87% 34%, 91% 25%, 95% 40%, 100% 28%, 100% 100%, 0 100%); --tape-edge: polygon(2% 0, 98% 0, 100% 25%, 98% 50%, 100% 75%, 98% 100%, 0 100%, 2% 75%, 0 50%, 2% 25%); --sparkle: polygon(50% 0, 62% 37%, 100% 50%, 62% 63%, 50% 100%, 38% 63%, 0 50%, 38% 37%); /* Password show/hide eye (Material "visibility"), used as a mask so it takes currentColor. */ --icon-visibility: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E"); --icon-visibility-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E"); --icon-inline: 1.25rem; /* Select chevron (rules/web/form-controls.md): colour baked in, 3:1+ on white. */ --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237545ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --select-chevron-size: 0.75em; } /* Button component tokens. */ :root { --btn-radius: var(--radius-pill); --btn-padding-block: var(--space-xs); --btn-padding-inline: var(--space-m); --btn-padding-inline-secondary: var(--space-m); --btn-min-height: 3.25rem; --btn-min-height-sm: 2.75rem; --qty-step-width-compact: 2.25rem; /* Quantity +/- in the mobile buy row. */ --gallery-nav-size: 2.25rem; /* PDP thumbnail strip arrows. */ /* Soft button (PDP "Add to cart"): brand-secondary at 10% with a 35% border. Text is the darker secondary: plain secondary on this tint is 4.49:1, just under AA; secondary-hover is 6.03:1 (5.54:1 on the hover tint). */ --btn-soft-bg: color-mix(in srgb, var(--brand-secondary) 10%, var(--white)); --btn-soft-bg-hover: color-mix(in srgb, var(--brand-secondary) 16%, var(--white)); --btn-soft-text: var(--brand-secondary-hover); --btn-soft-border: color-mix(in srgb, var(--brand-secondary) 35%, var(--white)); --btn-font-size: var(--text-small); --btn-font-weight: var(--weight-strong); --btn-font-weight-secondary: var(--weight-strong); --btn-letter-spacing: 0.01em; --btn-text-transform: none; --btn-border-width: 2px; } /* Legacy names still read by ported stylesheets (search overlay, Woo surfaces). Aliases only; new code uses the role names above. */ :root { --graphite: var(--ink); --charcoal: var(--ink); --deep-ocean: var(--brand-primary); --coastal-blue: var(--brand-secondary); --coastal-soft: var(--brand-tint-soft); --off-white: var(--surface); --pebble: var(--surface-alt); --terracotta: var(--brand-accent); --terracotta-hover: var(--brand-accent-hover); }