/* * theme.css — the light/dark token layer. * * The compiled css/.css files define the DARK palette in :root and expose it * to Tailwind via `@theme inline`, so every semantic utility (bg-background, * text-foreground, border-border, …) compiles to a runtime `var()` lookup: * * .bg-background { background-color: var(--background) } * * That means re-declaring those variables here flips ~3,000 utility usages with no * markup change and no Tailwind rebuild. Edit the palette in this file only. * * Link order per page: css/.css → css/theme.css → css/components.css * * `:root[data-theme="light"]` has specificity (0,2,0) and beats the page's plain * `:root` (0,1,0), so it wins regardless of file order or per-page palette drift * (the brand pages ship slightly different dark values). * * The theme is set by the pre-paint snippet in each page's and toggled by * js/theme.js, resolving in this order: an explicit choice stored under * `mecanova-theme`, else the OS `prefers-color-scheme`, else dark. */ /* ============================================================= * * DARK — additive only. * * Do NOT re-declare tokens the page stylesheets already own * (--background, --foreground, …). This block loads after them at * equal specificity, so anything repeated here would clobber the * per-page palettes (kuzca #031007, fuentes-guerra #020b05). * These are new tokens only. * * Dark is the brochure's cover green, #041108, not neutral black. The whole * ramp was shifted by the same amount, so background / surface / card / border * keep their old relationships and only the hue moved. * ============================================================= */ :root { /* Elevated/alternating surface — a step below --background on header + section bgs */ --surface-alt: #020c06; /* Shows through while the globe canvas fades in; matches GLOBE_PALETTES. */ --globe-backdrop: #0a0b0d; /* Channel triplets, so `rgba(236, 223, 204, .7)` can become `rgb(var(--foreground-rgb) / .7)` during the de-hardcoding passes. */ --foreground-rgb: 236 223 204; --muted-foreground-rgb: 205 201 194; --background-rgb: 4 17 8; --surface-alt-rgb: 2 12 6; /* Scrims over media: black in dark, paper in light. Deliberately NOT --background-rgb. The page ground is bottle green, and veiling video, photography or card imagery in it puts a green cast over the media — the palette should colour the page, not filter what sits on it. */ --scrim-rgb: 0 0 0; /* Hairline tint used for hover/active fills (search results, chips). */ --tint-rgb: 236 223 204; /* Modal/search backdrop. Stays dark in both themes — a light scrim over a light page gives nothing to separate the dialog from the content. */ --overlay-scrim: rgba(8, 8, 8, 0.72); --shadow-rgb: 0 0 0; --shadow-strength: 1; /* Interactive chrome: button fills, borders, hover states. Equal to --foreground here, so dark is unchanged. */ --accent-line: #ecdfcc; --accent-line-foreground: #041108; /* Scrim alphas over video/photography, driven as tokens so each theme can veil its media by the right amount. */ --media-scrim: 0.6; --media-scrim-soft: 0.4; --media-scrim-faint: 0.25; --card-scrim: 0.4; /* The portfolio band and its cards. Light on the black so the footage still reads through; the hover pair is the brochure's paper and ink. */ --panel-scrim: 0.45; --panel-veil: 0.2; --panel-hover: #f5f2ec; --panel-hover-foreground: #0a2914; /* How much of the footage/photograph itself shows through. */ --media-opacity: 0.4; --media-image-opacity: 0.3; /* Multiplier on the about-page panel-effect scrims. 1 = today's values. */ --fx-scrim-strength: 1; color-scheme: dark; } /* ============================================================= * * LIGHT * * Five colours, lightest to darkest, and nothing else: * * #f5f2ec paper page background, cards, text on dark fills * #d9d0c2 ground header bar, alternating section bands, block fills * #c2b29b line every rule, divider, hairline and field underline * #6a5f53 clay body copy, button fills, focus rings * #0a2914 ink headings, primary text, hover fills * * Cards are paper on ground: a card lifts off a tinted band, and on the * page it is read by its border instead. That is the only way to get three * surface levels out of two light tones. * * Contrast on #f5f2ec: * ink #0a2914 14.1:1 AAA * clay #6a5f53 5.6:1 AA * line #c2b29b 1.9:1 hairline, not text * * Contrast on the #d9d0c2 bands: * ink #0a2914 10.3:1 AAA * clay #6a5f53 4.1:1 — see the note in the handover; this is just * under the 4.5:1 AA floor for small body text * ============================================================= */ :root[data-theme="light"] { --background: #f5f2ec; --foreground: #0a2914; --primary: #0a2914; --primary-foreground: #f5f2ec; --secondary: #d9d0c2; --secondary-foreground: #0a2914; --muted: #d9d0c2; --muted-foreground: #6a5f53; --accent: #d9d0c2; --accent-foreground: #0a2914; /* Functional, not part of the palette — form validation only. */ --destructive: #8c2f2f; --card: #f5f2ec; --card-foreground: #0a2914; --popover: #f5f2ec; --popover-foreground: #0a2914; --border: #c2b29b; --input: #c2b29b; --ring: #6a5f53; /* Chart ramp: the palette itself, darkest first. */ --chart-1: #0a2914; --chart-2: #6a5f53; --chart-3: #c2b29b; --chart-4: #d9d0c2; --chart-5: #f5f2ec; --surface-alt: #d9d0c2; --globe-backdrop: #f5f2ec; --foreground-rgb: 10 41 20; --muted-foreground-rgb: 106 95 83; --background-rgb: 245 242 236; --surface-alt-rgb: 217 208 194; --scrim-rgb: 245 242 236; --tint-rgb: 106 95 83; /* Ink at low alpha — a deep green veil rather than a neutral grey one. */ --overlay-scrim: rgba(10, 41, 20, 0.45); --shadow-rgb: 106 95 83; --shadow-strength: 0.45; /* Clay carries the interactive chrome. Paper on clay is 5.6:1, so button labels stay legible, and it reads as a second tier below the ink used for headings and hover fills. */ --accent-line: #6a5f53; --accent-line-foreground: #f5f2ec; /* Roughly half the dark alphas. A beige veil hides far more of a video than a black one of the same strength — matching the numbers washes the footage out completely. */ --media-scrim: 0.3; --media-scrim-soft: 0.2; --media-scrim-faint: 0.12; --card-scrim: 0.24; /* Light keeps its original weights — the complaint was about the dark cards. The hover pair inverts, since the resting card here is already paper. */ --panel-scrim: 0.7; --panel-veil: 0.3; --panel-hover: #0a2914; --panel-hover-foreground: #f5f2ec; /* Dark footage fading into beige loses contrast fast, so let more of it through to compensate for the lighter ground behind it. */ --media-opacity: 0.58; --media-image-opacity: 0.45; /* The about-page panel effects are drawn dark-on-light now, and a light veil over dark marks kills far more contrast than a dark veil over light ones did. Thin the scrim so the line-art and particles stay visible. */ --fx-scrim-strength: 0.5; color-scheme: light; } /* ============================================================= * * Data-encoding accents * * These colours carry meaning — which agave variety a map pin marks, * which terrain a legend swatch stands for — so the hue must survive * the theme change. Each light twin keeps H and S and drops only * lightness, until it clears 3.5:1 on the beige page (above the 3:1 * WCAG floor for graphical objects, with headroom). * * A `-edge` colour is the lighter outline drawn on its fill; the pair is * shifted by a single delta so the outline stays lighter than what it * outlines instead of overtaking it. * * Dark values are today's exact colours — dark mode is untouched. * ============================================================= */ :root { --agave-blue-weber: #4a90d9; --agave-lechuguilla: #64a0c8; --agave-maximiliana: #78a078; --agave-cuishe: #7b9e6c; --agave-cenizo: #8ca0b4; --agave-salmiana: #a0968a; --agave-cupreata: #b47864; --agave-espadin: #c8a050; --agave-tobala: #d4a860; --terrain-sand: #c8b99a; --terrain-sand-edge: #d4c9ad; --terrain-moss: #6b7d55; --terrain-moss-edge: #7e9466; --terrain-earth: #8b5e3c; --terrain-earth-edge: #a0714d; } :root[data-theme="light"] { --agave-blue-weber: #3583d5; --agave-lechuguilla: #4187b6; --agave-maximiliana: #618961; --agave-cuishe: #69895b; --agave-cenizo: #69839d; --agave-salmiana: #8a7e70; --agave-cupreata: #b0715b; --agave-espadin: #9f7a32; --agave-tobala: #a6782d; --terrain-sand: #7c6943; --terrain-sand-edge: #927e4c; --terrain-moss: #5f6f4c; --terrain-moss-edge: #72865d; /* earth already clears the bar on beige — left at its dark value */ --terrain-earth: #8b5e3c; --terrain-earth-edge: #a0714d; } /* ============================================================= * * Dark islands * * Media-heavy blocks (hero video, globe, full-bleed photography) stay * dark in both themes — the imagery is graded for it and the scrims * exist to keep cream text legible on top. * * Re-declaring the tokens ON the section element beats the inherited * :root value regardless of ancestor specificity, so every semantic * utility inside the island keeps its dark rendering for free. * ============================================================= */ .mcn-dark-island { --background: #041108; --foreground: #ecdfcc; --primary: #ecdfcc; --primary-foreground: #041108; --secondary: #1d2a21; --secondary-foreground: #ecdfcc; --muted: #1d2a21; --muted-foreground: #cdc9c2; --accent: #1d2a21; --accent-foreground: #ecdfcc; --card: #0d1a11; --card-foreground: #ecdfcc; --popover: #041108; --popover-foreground: #ecdfcc; --border: #1d2a21; --input: #2a2a2a; --ring: #cdc9c2; --surface-alt: #020c06; --surface-alt-rgb: 2 12 6; --globe-backdrop: #0a0b0d; --foreground-rgb: 236 223 204; --muted-foreground-rgb: 205 201 194; --background-rgb: 4 17 8; --scrim-rgb: 0 0 0; --tint-rgb: 236 223 204; --shadow-rgb: 0 0 0; --shadow-strength: 1; color-scheme: dark; } /* --surface-alt is registered in each src/*.css @theme block, so Tailwind emits bg-surface-alt / to-surface-alt / from-surface-alt like any other colour. */ /* ============================================================= * * Media scrims * * Hand-written rather than `bg-background/60` so the strength is a * token: the same veil that reads as subtle over dark footage swallows * it whole over beige. * * The colour comes from --scrim-rgb, not --background-rgb: black over media * in dark, paper in light. In light the two are the same value, so only dark * is affected — and there it is the difference between a neutral veil and a * green filter over every video and photograph on the site. * ============================================================= */ /* ============================================================= * * Panels on footage — the homepage portfolio band and its cards * * `bg-card/α` tinted these with the page colour, which over video reads as a * filter rather than a panel, so the fill comes from --scrim-rgb instead. * * The hover state has to live here too, not in the markup. This file is * unlayered and Tailwind's utilities sit in `@layer utilities` — and an * unlayered declaration beats a layered one no matter how specific the layered * selector is. So `.mcn-panel` silently outranked `hover:bg-primary`: the card * stayed dark while `group-hover:text-background` still fired, leaving * near-black type on a near-black card. Owning both states in one place is the * only arrangement that cannot drift apart again. * * On hover the card inverts to the brochure's own pair — paper #f5f2ec under * ink #0a2914 — and swaps in light, where the resting card is already paper. * ============================================================= */ .mcn-panel { background-color: rgb(var(--scrim-rgb) / var(--panel-scrim)); transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; } .mcn-panel:hover, .mcn-panel:focus-visible { background-color: var(--panel-hover); border-color: var(--panel-hover); color: var(--panel-hover-foreground); } /* The type inside carries Tailwind colour utilities, which are layered — so the descendant rule is what actually recolours it. */ .mcn-panel:hover *, .mcn-panel:focus-visible * { color: var(--panel-hover-foreground); } .mcn-panel-veil { background-color: rgb(var(--scrim-rgb) / var(--panel-veil)); } /* The ground a translucent photograph composites onto. `bg-background` put the page colour behind an image running at 30% opacity, so 70% of every pixel was the page — which is how the collection heroes picked up a green cast. Black in dark, paper in light, like every other veil over media. */ .mcn-media-ground { background-color: rgb(var(--scrim-rgb)); } /* Collection hero fade: a legibility veil at the top, and a blend into the page at the bottom. Only the veil takes the scrim colour — the bottom stop has to stay --background or the hero meets the next section on a visible seam. */ .mcn-hero-fade { background-image: linear-gradient( to bottom, rgb(var(--scrim-rgb) / 0.6) 0%, transparent 50%, var(--background) 100% ); } .mcn-scrim { background-color: rgb(var(--scrim-rgb) / var(--media-scrim)); } .mcn-scrim-soft { background-color: rgb(var(--scrim-rgb) / var(--media-scrim-soft)); } .mcn-scrim-faint { background-color: rgb(var(--scrim-rgb) / var(--media-scrim-faint)); } .mcn-card-scrim { background-color: rgb(var(--scrim-rgb) / var(--card-scrim)); } /* The media's own opacity, for the same reason. The collection pages cross-fade two stacked videos from JS by writing an inline opacity; that inline value is `var(--media-opacity)`, so it keeps following the theme. */ .mcn-media-video { opacity: var(--media-opacity); } .mcn-media-image { opacity: var(--media-image-opacity); } /* Copy sitting on top of footage has no predictable background behind it — the frame moves. Secondary text steps up to the primary ink there, since clay on a bright video frame is what made the compliance strip hard to read. Light only: in dark the two are close enough that nothing needs to move. */ :root[data-theme="light"] .mcn-on-media { --muted-foreground: var(--foreground); --muted-foreground-rgb: var(--foreground-rgb); } /* ============================================================= * * Producer logos on the portfolio cards * * These are cut-out PNGs drawn for a dark ground — a white wordmark * (Fuentes Guerra, Real de Ixtlán) or a gold crest (Kuzca) — so on beige * they wash out. There is no light-ground artwork for them, so they are * recoloured to the ink used everywhere else. * * `brightness(0)` collapses every channel to zero first, which makes the * rest of the chain independent of the source: white and gold both land on * the same tone. Alpha is untouched by all of these functions, so the * cut-out edges survive. The remaining steps were solved numerically and * land on rgb(10, 41, 20) — #0a2914 exactly. * * Scoped to .brand-card (the three collection pages) and .map-card (the * homepage producer map popovers) — the two places a cut-out logo is drawn on * the page background. The producer pages keep their artwork as drawn. * ============================================================= */ :root[data-theme="light"] .brand-card img, :root[data-theme="light"] .map-card img { filter: brightness(0) saturate(100%) invert(7%) sepia(58%) saturate(357%) hue-rotate(87deg) brightness(222%) contrast(110%); } /* ============================================================= * * Hero legibility glow * * The stacked black shadows hold cream type off the dark globe on the * homepage. In light mode that type is near-black on beige over a light * globe, so the glow only reads as a smudge. * * The history-page hero titles carry their shadow in an inline style * instead — those sit on photographs and keep it in both themes. * ============================================================= */ :root[data-theme="light"] .hero-text-enhanced { text-shadow: none; -webkit-text-stroke: 0; text-stroke: 0; } /* ============================================================= * * Theme toggle button (header) * ============================================================= */ .mcn-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--foreground); background: none; border: none; cursor: pointer; transition: color 0.3s ease; } .mcn-theme-toggle:hover { color: var(--primary); } .mcn-theme-toggle iconify-icon { font-size: 1.2rem; } /* The sun/moon swap is driven by CSS so it survives a pre-paint theme set before js/theme.js has parsed. */ .mcn-theme-toggle [data-icon-dark] { display: inline-flex; } .mcn-theme-toggle [data-icon-light] { display: none; } :root[data-theme="light"] .mcn-theme-toggle [data-icon-dark] { display: none; } :root[data-theme="light"] .mcn-theme-toggle [data-icon-light] { display: inline-flex; } /* Hover wit: the two icons do not share a gesture. The sun turns — rays sweep round, which is the only motion a sun has. The crescent moon rocks in its cradle instead, because a spinning crescent just looks broken. Both land slightly off-axis and hold there while hovered, then ease back on leave. */ @media (hover: hover) { .mcn-theme-toggle iconify-icon { transform-origin: 50% 50%; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; } .mcn-theme-toggle:hover [data-icon-dark], .mcn-theme-toggle:focus-visible [data-icon-dark] { animation: mcn-sun-turn 0.5s ease-out; transform: rotate(36deg) scale(1.12); } .mcn-theme-toggle:hover [data-icon-light], .mcn-theme-toggle:focus-visible [data-icon-light] { animation: mcn-moon-rock 0.6s ease-out; transform: rotate(-6deg) scale(1.1); } } @keyframes mcn-sun-turn { 0% { transform: rotate(0deg) scale(1); } 60% { transform: rotate(44deg) scale(1.18); } 100% { transform: rotate(36deg) scale(1.12); } } @keyframes mcn-moon-rock { 0% { transform: rotate(0deg) scale(1); } 30% { transform: rotate(-14deg) scale(1.12); } 62% { transform: rotate(9deg) scale(1.12); } 100% { transform: rotate(-6deg) scale(1.1); } } @media (prefers-reduced-motion: reduce) { .mcn-theme-toggle iconify-icon { transition: none; } .mcn-theme-toggle:hover iconify-icon, .mcn-theme-toggle:focus-visible iconify-icon { animation: none; transform: none; } } /* ============================================================= * * Cross-theme easing * * Only the surfaces that actually flip animate, and only when the user * toggles (js/theme.js adds .mcn-theme-anim for the duration) — never on * first paint, and never for users who ask for reduced motion. * ============================================================= */ .mcn-theme-anim, .mcn-theme-anim body, .mcn-theme-anim header, .mcn-theme-anim section, .mcn-theme-anim footer, .mcn-theme-anim [class*="bg-background"], .mcn-theme-anim [class*="bg-card"], .mcn-theme-anim [class*="bg-secondary"], .mcn-theme-anim [class*="bg-muted"] { transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease; } @media (prefers-reduced-motion: reduce) { .mcn-theme-anim, .mcn-theme-anim * { transition: none !important; } }