/* ============================================================================ magicandmilestones-brand.css Brand tokens, theme, chrome, and primitives for Magic and Milestones. Mirror of the LML / PWS brand stylesheet shape — the chrome-migrate skill can swap in a re-skin without touching tool-page wiring. Two-wing brand model: - Master ink (aubergine) shared across both wings. - data-wing="little" → warm register: oyster cream + rose + sage + brass + Cormorant Garamond display. - data-wing="love" → ceremonial register: ivory + emerald + antique gold + taupe + Playfair Display display. Switch wings by setting [data-wing] on the (or any container). ============================================================================ */ :root{ /* ---- master ink (both wings) -------------------------------------- */ --aubergine:#3A2640; --aubergine-2:#5C4060; --aubergine-soft:rgba(58,38,64,.12); --aubergine-rule:rgba(58,38,64,.22); /* ---- Little Milestones register ----------------------------------- */ --rose:#C8908A; --rose-ink:#7A3E3E; --sage:#9FB098; --sage-ink:#4A5E48; --brass:#B49262; --brass-ink:#7A6038; --oyster:#F5ECDE; --oyster-2:#FBF6EB; /* ---- Love Milestones register ------------------------------------- */ --emerald:#1F4D3E; --emerald-ink:#0F2E22; --gold:#C9A961; --gold-ink:#7A6028; --taupe:#C9BBA8; --ivory:#F8F2E4; --ivory-2:#FBF7EB; /* ---- default (Little) surfaces ------------------------------------ */ --bg:var(--oyster); --surface:#FFFFFF; --surface-2:var(--oyster-2); --text:var(--aubergine); --muted:var(--aubergine-2); --rule:var(--aubergine-soft); --rule-strong:var(--aubergine-rule); --accent:var(--brass); --accent-ink:#fff; --accent-soft:rgba(180,146,98,.16); /* ---- geometry ----------------------------------------------------- */ --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:20px; --shadow-sm:0 1px 2px rgba(58,38,64,.06), 0 1px 1px rgba(58,38,64,.04); --shadow-md:0 8px 24px -10px rgba(58,38,64,.18), 0 2px 6px rgba(58,38,64,.06); --shadow-lg:0 24px 48px -16px rgba(58,38,64,.22); --maxw:1200px; --pad-x:clamp(20px,3vw,40px); /* ---- type --------------------------------------------------------- */ --display:'Cormorant Garamond',ui-serif,Georgia,serif; --display-ceremonial:'Playfair Display',ui-serif,Georgia,serif; --body:'Inter',ui-sans-serif,system-ui,sans-serif; --body-ceremonial:'Lora',ui-serif,Georgia,serif; --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace; } /* ---- Love wing register (apply [data-wing="love"]) ------------------ */ [data-wing="love"]{ --bg:var(--ivory); --surface-2:var(--ivory-2); --accent:var(--gold); --accent-soft:rgba(201,169,97,.16); --display:var(--display-ceremonial); --body:var(--body-ceremonial); } /* ---- dark theme (auto-applied unless data-theme="light") ------------ */ [data-theme="dark"]{ --bg:#1F1525; --surface:#291A30; --surface-2:#33223D; --text:#F5ECDE; --muted:#C8B5C8; --rule:rgba(245,236,222,.12); --rule-strong:rgba(245,236,222,.22); --oyster:#1F1525; --oyster-2:#291A30; --ivory:#1F1525; --ivory-2:#291A30; --accent-soft:rgba(180,146,98,.22); } [data-theme="dark"][data-wing="love"]{ --accent-soft:rgba(201,169,97,.22); } /* ============================================================================ reset + base ============================================================================ */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--accent);color:var(--accent-ink)} /* ============================================================================ shared chrome primitives ============================================================================ */ .mm-container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)} .btn{ display:inline-flex;align-items:center;gap:.55em; height:48px;padding:0 24px;border-radius:999px; font-family:var(--body);font-weight:500;font-size:14.5px;letter-spacing:.02em; border:0.5px solid var(--rule-strong);background:var(--surface);color:var(--text); transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; } .btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--text)} .btn.primary{background:var(--aubergine);color:var(--oyster);border-color:var(--aubergine)} .btn.primary:hover{background:#4A3252} .btn.accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn.ghost{background:transparent;border-color:var(--rule-strong)} .btn.sm{height:36px;padding:0 16px;font-size:13px} .btn .arrow{display:inline-block;transition:transform .2s ease} .btn:hover .arrow{transform:translateX(3px)} .eyebrow{ font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase; color:var(--muted); } .chip{ display:inline-flex;align-items:center;gap:6px; padding:5px 12px;border-radius:999px; background:var(--accent-soft);color:var(--text); font-family:var(--body);font-size:12px;letter-spacing:.04em; } .rule-celestial, .rule-pressed{ display:flex;align-items:center;gap:14px; color:var(--accent); } .rule-pressed::before,.rule-pressed::after, .rule-celestial::before,.rule-celestial::after{ content:"";flex:1;height:0.5px;background:var(--rule-strong); } .rule-pressed .glyph, .rule-celestial .glyph{display:inline-flex;color:var(--accent);font-size:14px} .card{ background:var(--surface); border:0.5px solid var(--rule-strong); border-radius:var(--r-md); padding:28px; } /* ============================================================================ wordmark ============================================================================ */ .mm-logo{ display:inline-flex;align-items:baseline;gap:8px; font-family:var(--display);font-style:italic;font-weight:500; font-size:26px;line-height:1;color:var(--text); letter-spacing:-.005em; } .mm-logo .amp{ color:var(--accent);font-size:30px;font-weight:500; font-style:italic; } [data-wing="love"] .mm-logo, .mm-logo.ceremonial{ font-family:var(--display-ceremonial);font-weight:700;font-style:normal; letter-spacing:-.005em; } [data-wing="love"] .mm-logo .amp, .mm-logo.ceremonial .amp{ font-family:var(--display-ceremonial);font-style:italic;font-weight:400; color:var(--gold);font-size:34px; } /* ============================================================================ header ============================================================================ */ .mm-header{ position:sticky;top:0;z-index:50; background:rgba(245,236,222,.85); backdrop-filter:saturate(120%) blur(8px); -webkit-backdrop-filter:saturate(120%) blur(8px); border-bottom:0.5px solid var(--rule); } [data-wing="love"] .mm-header{background:rgba(248,242,228,.85)} [data-theme="dark"] .mm-header{background:rgba(31,21,37,.85)} .mm-header-inner{ display:flex;align-items:center;gap:24px; height:72px; } .mm-nav{ display:flex;gap:24px;margin-left:auto; font-family:var(--body);font-size:14px; } .mm-nav a{ color:var(--muted);padding:6px 0; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease; } .mm-nav a:hover,.mm-nav a.active{color:var(--text);border-bottom-color:var(--accent)} .mm-header-actions{display:flex;align-items:center;gap:10px} .theme-toggle{ width:36px;height:36px;border-radius:999px; border:0.5px solid var(--rule-strong);background:transparent; display:inline-flex;align-items:center;justify-content:center; font-size:14px;color:var(--text); } .theme-toggle:hover{background:var(--surface-2)} /* ============================================================================ hero ============================================================================ */ .mm-hero{padding:84px 0 64px;position:relative} .mm-hero-inner{ display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center; } .mm-hero .hero-eyebrow{margin-bottom:18px;display:inline-flex;align-items:center;gap:10px} .mm-hero h1{ font-family:var(--display);font-style:italic;font-weight:500; font-size:clamp(48px,7vw,84px);line-height:.98;letter-spacing:-.015em; margin:0 0 24px;color:var(--text); } .mm-hero h1 .amp{color:var(--accent);font-style:italic} .mm-hero h1 em{font-style:italic;color:var(--accent)} .mm-hero .lead{ font-size:18px;line-height:1.6;color:var(--muted); max-width:46ch;margin:0 0 32px; } .mm-hero-actions{display:flex;gap:12px;flex-wrap:wrap} .mm-hero-art{ position:relative;aspect-ratio:4/5; background:var(--surface-2); border:0.5px solid var(--rule-strong);border-radius:var(--r-md); display:flex;align-items:center;justify-content:center; padding:32px; } /* ============================================================================ two-wing entry ============================================================================ */ .mm-wings{padding:24px 0 96px} .mm-wings-grid{ display:grid;grid-template-columns:1fr 1fr;gap:24px; } .wing{ border-radius:var(--r-md);overflow:hidden; border:0.5px solid var(--rule-strong); background:var(--surface); padding:40px 36px 32px; transition:transform .25s ease, box-shadow .25s ease; display:flex;flex-direction:column;gap:18px; } .wing:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .wing.little{background:var(--oyster-2)} .wing.love{background:var(--ivory-2)} .wing-tag{ display:inline-flex;align-items:center;gap:8px; font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase; color:var(--muted); } .wing.little .wing-tag::before{ content:"";width:10px;height:10px;background:var(--brass);border-radius:50%; } .wing.love .wing-tag::before{ content:"";width:10px;height:10px;background:var(--gold);border-radius:50%; } .wing h2{ font-family:var(--display);font-style:italic;font-weight:500; font-size:42px;line-height:1.02;letter-spacing:-.01em; margin:0;color:var(--aubergine); } .wing.love h2{font-family:var(--display-ceremonial);font-style:normal;font-weight:700} .wing-lead{ font-size:15px;line-height:1.6;color:var(--aubergine-2); margin:0; } .wing-list{ list-style:none;padding:0;margin:6px 0 0; display:grid;grid-template-columns:1fr 1fr;gap:6px 18px; font-size:13.5px;color:var(--aubergine-2); } .wing-list li{display:flex;gap:8px;align-items:center} .wing.little .wing-list li::before{ content:"";width:5px;height:5px;background:var(--brass); border-radius:50%;flex-shrink:0; } .wing.love .wing-list li::before{ content:"★";color:var(--gold);font-size:11px;line-height:1;flex-shrink:0; } .wing-foot{ margin-top:auto;padding-top:18px; border-top:0.5px solid var(--aubergine-soft); display:flex;justify-content:space-between;align-items:baseline; font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted); } .wing-foot .enter{ color:var(--aubergine);font-weight:500;letter-spacing:.16em;text-transform:uppercase; font-size:11px; } .wing.little .wing-foot .enter{color:var(--brass-ink)} .wing.love .wing-foot .enter{color:var(--emerald-ink)} /* ============================================================================ manifesto strip (between wings + footer) ============================================================================ */ .mm-manifesto{ padding:80px 0 96px; border-top:0.5px solid var(--rule); text-align:center; } .mm-manifesto p{ font-family:var(--display);font-style:italic;font-weight:500; font-size:clamp(28px,3.4vw,40px);line-height:1.2; color:var(--aubergine); margin:0 auto;max-width:24ch; } .mm-manifesto .sig{ margin-top:22px;display:inline-flex;align-items:center;gap:10px; font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase; color:var(--muted); } /* ============================================================================ footer ============================================================================ */ .mm-footer{ background:var(--aubergine);color:var(--oyster); padding:64px 0 24px; } .mm-foot-inner{ display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px; } .mm-foot-brand .mm-logo{color:var(--oyster)} .mm-foot-brand .mm-logo .amp{color:var(--gold)} .mm-foot-tag{ margin-top:18px;font-size:13.5px;line-height:1.6; color:rgba(245,236,222,.7);max-width:32ch; } .mm-foot-col h4{ font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase; color:rgba(245,236,222,.6);margin:0 0 14px;font-weight:500; } .mm-foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px} .mm-foot-col a{font-size:14px;color:var(--oyster);opacity:.85} .mm-foot-col a:hover{opacity:1;color:var(--gold)} .mm-foot-bottom{ margin-top:48px;padding-top:22px; border-top:0.5px solid rgba(245,236,222,.18); display:flex;justify-content:space-between;align-items:center; font-family:var(--mono);font-size:11px;letter-spacing:.06em; color:rgba(245,236,222,.55); } /* ============================================================================ toast (used by tool pages) ============================================================================ */ .toast{ position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px); padding:12px 22px;border-radius:var(--r-md); background:var(--aubergine);color:var(--oyster); font-family:var(--mono);font-size:12px;letter-spacing:.04em; box-shadow:var(--shadow-lg); opacity:0;pointer-events:none; transition:transform .25s ease, opacity .25s ease; z-index:1000; } .toast.show{transform:translateX(-50%) translateY(0);opacity:1} /* ============================================================================ responsive ============================================================================ */ @media (max-width:880px){ .mm-hero-inner{grid-template-columns:1fr;gap:36px} .mm-wings-grid{grid-template-columns:1fr} .mm-foot-inner{grid-template-columns:1fr 1fr;gap:32px} .mm-nav{display:none} } @media (max-width:520px){ .mm-foot-inner{grid-template-columns:1fr} .wing-list{grid-template-columns:1fr} .mm-header-inner{height:64px} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:0!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}