/* ========================================================================== Aöra Marbella — redesign mockup · DESIGN TOKENS Direction A "Aöra refinada": the shop's own kit colours (slate blue #7B8EAA, gold #CD9D5F, sand #E5D2C1) refined into an accessible neutral-first system. Every value here is used by base.css and by all five mockup pages. ========================================================================== */ :root { /* ---- 1. COLOUR ------------------------------------------------------ Rule: 4 neutrals + 2 accents. Neutrals carry the page; the accents (gold, slate) are reserved for CTAs, rules and highlights. Contrast ratios are measured against #FFFFFF unless noted. --------------------------------------------------------------------- */ /* Neutrals — v3 (client 2026-09-16: "more brand blue, less beige"). Every band is now a tint of the brand blue #7B8EAA. The warm cream and sand values are GONE as surfaces; the token names stay because all 20 pages reference them. Darkest band = #E3EAF2, chosen so that ink, tinta suave, azul profundo AND oro profundo all still pass 4.5:1. */ --c-white: #FFFFFF; /* product photography ground, cards */ --c-cream: #F4F7FB; /* soft band — coolest blue tint (was warm) */ --c-sand: #E3EAF2; /* section band — strongest pale blue tint */ --c-sand-deep: #C9D6E4; /* tiles/edges/hover fills (was kit sand) */ --c-beige: #E5D2C1; /* v4: brand sand, client asked beige bands */ --c-beige-soft: #F1E6DB; /* lighter beige for cards on beige */ --muted-on-beige: #46515E; /* 7.3:1 on beige */ --eyebrow-on-beige:#6B4715; /* 6.2:1 on beige */ --link-on-beige: #3D4E68; /* 6.4:1 on beige */ --c-mist: #E9EEF4; /* cool band, between cream and sand */ --c-border: #DDE3EA; /* 1px card/section rules (no drop shadows) */ --c-border-strong:#B4BECC; /* inputs, focus-adjacent borders */ /* Ink (text) */ --c-ink: #1A222C; /* 16.04:1 on white — headings + body */ --c-ink-muted: #5A6673; /* 5.86:1 on white — secondary copy */ /* Accent 1 — slate blue (the brand's own blue, from AORA LOGO_OK.pdf) */ --c-slate: #7B8EAA; /* 3.34:1 — BRAND SURFACE. Never small text. */ --c-slate-deep: #546782; /* 5.77:1 on white, 5.40:1 on cream — links, nav, eyebrow-slate, focus ring. Same hue as the brand blue, darkened until it passes. */ --c-slate-hover: #6B7F9D; /* white on it = 4.08:1 — hover of every brand-blue button (better than the rest). Same hue, one step deeper, so the hover is felt without changing the colour family. */ --c-navy: #1F2B44; /* v4 (2026-09-17): DARK SURFACES ONLY. Scarlet: "all the dark blue buttons across the page should be Aöra blue". Every navy BUTTON and selected state is now --c-slate. What still uses navy: .announce (top bar), .band-ink (dark section background), .skip (keyboard-only skip link), .drawer-scrim. */ --c-slate-tint: #EDF1F7; /* very light slate wash for panels */ --c-navy-hover: #2C3A57; /* hover of a navy SURFACE. Unused since v4; kept so nothing referencing it can break. */ /* Accent 2 — gold (kit "Gold" #CD9D5F, kept exactly) */ --c-gold: #CD9D5F; /* 2.45:1 on white - NEVER small text on white. Use as a fill (ink text on it = 6.56:1), as a 1-2px rule, or as large display type. */ --c-gold-deep: #8C6023; /* 5.51:1 — small gold-toned text and links */ --c-gold-tint: #F7EFE3; /* gold wash for badges/offer strips */ /* Status */ --c-stock: #2F6B4F; /* 6.29:1 — "En stock" */ --c-clay: #8A3B2E; /* 7.65:1 — sale price, "Agotado", errors */ --c-clay-tint: #FBF0ED; /* Semantic aliases used by components */ --bg-page: #FAFAFB; /* v3: very light cool off-white, not cream */ --bg-card: var(--c-white); --text-1: var(--c-ink); --text-2: var(--c-ink-muted); --link: var(--c-slate-deep); --rule: var(--c-border); --focus: var(--c-slate-deep); /* ---- 1b. BRAND SURFACE (v2, client notes 2026-09-15) ----------------- Scarlet asked for her own brand blue #7B8EAA on the Club band and on the footer. It is a mid tone, so the text rules are strict: ink #1A222C on it = 4.81:1 -> body, links, small text (OK) white #FFFFFF on it = 3.34:1 -> LARGE text only -> headings gold #CD9D5F on it = 1.36:1 -> NEVER text. Rules/fills only. There is no room for a lighter "muted" tone on this surface: anything that still reaches 4.5:1 is almost ink. So secondary copy on the brand band is separated by SIZE, not by colour. --------------------------------------------------------------------- */ --bg-brand: var(--c-slate); --text-on-brand: var(--c-ink); /* 4.81:1 on #7B8EAA */ --muted-on-brand: #1D2631; /* 4.58:1 on #7B8EAA */ --heading-on-brand: #FFFFFF; /* 3.34:1 — large display type only */ --rule-on-brand: rgba(255,255,255,.35); --c-brand-grad: linear-gradient(90deg, #E5D2C1, #CD9D5F); /* ---- 2. TYPE -------------------------------------------------------- Two faces only. Prata = the shop's real display serif (kept, so the redesign still reads as Aöra). Inter = the shop's real UI sans. Scale: 16px base, 1.25 modular ratio, rounded to whole pixels. --------------------------------------------------------------------- */ --font-display: "Prata", "Times New Roman", Georgia, serif; --font-sub: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif; /* v4: lead + intro text (client: Manrope or DM Sans) */ --fs-sub: clamp(1.125rem, 1.02rem + 0.45vw, 1.35rem); --font-sans: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* v4: was Inter */ --fs-2xs: 0.75rem; /* 12px — badges, legal */ --fs-xs: 0.8125rem; /* 13px — micro-copy, breadcrumbs */ --fs-sm: 0.875rem; /* 14px — UI labels, card meta */ --fs-base: 1rem; /* 16px — body */ --fs-lg: 1.25rem; /* 20px — lead paragraphs, card prices */ --fs-xl: 1.5625rem; /* 25px — h3 */ --fs-2xl: 1.9531rem; /* 31px — h2 */ --fs-3xl: 2.4414rem; /* 39px — section display */ --fs-4xl: 3.0518rem; /* 49px — h1 */ --fs-5xl: 3.8147rem; /* 61px — hero display (desktop only) */ --lh-tight: 1.15; /* display headings */ --lh-snug: 1.3; /* sub-headings */ --lh-body: 1.5; /* body copy */ --tr-tight: -0.02em; /* display tracking, slightly tight */ --tr-wide: 0.08em; /* eyebrows / small caps */ --tr-wider: 0.14em; /* ---- 3. SPACE (4px base) -------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ---- 4. LAYOUT ------------------------------------------------------ */ --wrap-max: 1280px; /* 12-column grid lives inside this */ --wrap-narrow: 960px; --gutter: 24px; /* 16px below 640px, see base.css */ --col-gap: 24px; --header-h: 72px; --tap: 44px; /* minimum touch target */ /* ---- 5. RADIUS ------------------------------------------------------ */ --r-xs: 4px; --r-sm: 6px; /* buttons, inputs */ --r-md: 10px; /* cards, media */ --r-lg: 14px; /* large panels */ --r-pill: 999px; /* chips, badges */ /* ---- 6. ELEVATION --------------------------------------------------- Flat by default: surfaces are separated by 1px rules and background shifts. A shadow is allowed ONLY on things that float over content. --------------------------------------------------------------------- */ --shadow-pop: 0 8px 24px rgba(26, 34, 44, 0.10); --shadow-over: 0 16px 40px rgba(26, 34, 44, 0.16); /* ---- 7. MOTION ------------------------------------------------------ */ --dur: 180ms; --dur-slow: 240ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); } /* Direction A — "Aöra refinada" (the direction every real mockup page uses). Restated as --d-* so the three boards in 00-directions.html share markup. */ .dir-a { --d-bg: var(--c-cream); --d-surface: var(--c-white); --d-band: var(--c-sand); --d-ink: var(--c-ink); --d-muted: var(--c-ink-muted); --d-accent: var(--c-gold); --d-accent-2:var(--c-slate-deep); --d-border: var(--c-border); --d-display: var(--font-display); --d-body: var(--font-sans); } /* Direction B — "Editorial cálida" (board sample only, 00-directions.html) */ .dir-b { --d-bg: #FBF6EF; --d-surface: #FFFFFF; --d-band: #F2E7DA; --d-ink: #2A211C; /* 14.65:1 on #FBF6EF */ --d-muted: #6A5A50; /* 6.12:1 on #FBF6EF */ --d-accent: #A4472F; /* 5.55:1 on #FBF6EF — terracotta */ --d-accent-2:#6E3550; /* 8.54:1 — muted plum for secondary marks */ --d-border: #E5D7C6; --d-display: "Cormorant Garamond", Georgia, serif; --d-body: "Jost", "Inter", sans-serif; } /* Direction C — "Clínica limpia" (board sample only) */ .dir-c { --d-bg: #FFFFFF; --d-surface: #F7F9F8; --d-band: #EDF3F0; --d-ink: #21262B; /* 15.25:1 on white */ --d-muted: #5B646B; /* 6.03:1 on white */ --d-accent: #3F6B5A; /* 6.07:1 on white — eucalyptus */ --d-accent-2:#6E8B7E; /* large text / rules only */ --d-border: #DDE4E1; --d-display: "Inter", sans-serif; --d-body: "Inter", sans-serif; }