/* ------- CASC Global — design tokens ------- */ :root { /* warmBlush (default, from Wix) */ --ivory: #F5EEE6; --ivory-2: #EFE6DB; --blush: #E8D4C4; --blush-2: #DDC3AF; --terracotta: #C89982; --rose: #9A6B5A; --rose-deep: #7A4F42; --charcoal: #2A2220; --ink: #3A2E2A; --muted: #7B6A62; --rule: #D9C7B8; --sage: #8A9A7B; --paper: #FBF7F2; --shadow: 0 1px 2px rgba(42,34,32,.04), 0 12px 40px -16px rgba(122,79,66,.18); --heading-font: "Cormorant Garamond", "Times New Roman", serif; --body-font: "Inter", system-ui, -apple-system, sans-serif; --page-max: 1280px; --pad-x: clamp(24px, 5vw, 88px); --section-y: clamp(72px, 10vw, 144px); } /* palette variants switched by data-palette on */ body[data-palette="claySage"] { --ivory:#F3EFE7; --ivory-2:#ECE6DA; --blush:#DCD1BE; --blush-2:#C9BAA3; --terracotta:#9FA98C; --rose:#6E7A5E; --rose-deep:#556148; --charcoal:#242622; --ink:#32372E; --muted:#7A8472; --rule:#C6BEAB; --sage:#B5A78A; --paper:#F8F5ED; } body[data-palette="inkRose"] { --ivory:#F2E9E2; --ivory-2:#EADDD2; --blush:#E0C6B6; --blush-2:#CFA693; --terracotta:#A86A57; --rose:#733A2E; --rose-deep:#4C2219; --charcoal:#1E1815; --ink:#2B211D; --muted:#6F5952; --rule:#C9AC9B; --sage:#7C8669; --paper:#F6EEE6; } body[data-palette="mochaLinen"] { --ivory:#EFE8DD; --ivory-2:#E7DDCD; --blush:#D7C3AB; --blush-2:#BFA589; --terracotta:#8A6A4E; --rose:#5C4330; --rose-deep:#3E2C1F; --charcoal:#20180F; --ink:#2E2318; --muted:#77675A; --rule:#C6AE92; --sage:#9C9375; --paper:#F5EDE1; } body[data-mode="dark"] { --ivory:#1B1513; --ivory-2:#221A17; --blush:#2E231E; --blush-2:#3A2C25; --terracotta:#C89982; --rose:#D9A893; --rose-deep:#E8B9A4; --charcoal:#F5EEE6; --ink:#ECE1D4; --muted:#B09C92; --rule:#3A2C25; --sage:#A6B58F; --paper:#120E0C; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 48px -16px rgba(0,0,0,.6); } body[data-density="packed"] { --section-y: clamp(48px, 6vw, 88px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--body-font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .serif { font-family: var(--heading-font); font-weight: 400; letter-spacing: -0.01em; color: var(--charcoal); } h1 { font-size: clamp(44px, 7vw, 92px); line-height: 1.02; margin: 0; } h2 { font-size: clamp(32px, 4.5vw, 56px); line-height: 1.08; margin: 0; } h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; margin: 0; } h4 { font-size: 18px; margin: 0; } p { margin: 0; } .italic { font-style: italic; } .eyebrow { font-family: var(--body-font); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--rose-deep); } .rule { height: 1px; background: var(--rule); border: 0; margin: 0; } .wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--pad-x); } .section { padding: var(--section-y) 0; } /* Buttons */ .btn { font-family: var(--body-font); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: all .2s ease; white-space: nowrap; } .btn-primary { background: var(--charcoal); color: var(--paper); } .btn-primary:hover { background: var(--rose-deep); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); } .btn-ghost:hover { background: var(--charcoal); color: var(--paper); } .btn-link { background: none; border: 0; padding: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; } .btn-link .arrow { transition: transform .2s ease; } .btn-link:hover .arrow { transform: translateX(4px); } /* Diamond motif */ .diamond { display: inline-block; width: 10px; height: 10px; background: var(--terracotta); transform: rotate(45deg); vertical-align: middle; } .diamond-outline { display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--rose); transform: rotate(45deg); vertical-align: middle; } /* Imagery placeholder — subtly striped */ .img-ph { position: relative; background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--blush) 60%, transparent) 0 2px, transparent 2px 10px), linear-gradient(180deg, var(--blush-2), var(--blush)); color: var(--rose-deep); display: flex; align-items: center; justify-content: center; overflow: hidden; } .img-ph .ph-label { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: var(--paper); padding: 6px 12px; border-radius: 2px; color: var(--rose-deep); } /* Cards */ .card { background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; padding: 32px; transition: transform .25s ease, box-shadow .25s ease; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } /* chip */ .chip { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep); background: var(--ivory-2); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 10px; display: inline-block; } /* Focus */ a, button { outline: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; } /* Tweaks panel */ .tweaks-fab { position: fixed; right: 20px; bottom: 20px; z-index: 100; width: 48px; height: 48px; border-radius: 50%; background: var(--charcoal); color: var(--paper); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.18); } .tweaks-panel { position: fixed; right: 20px; bottom: 80px; z-index: 100; width: 320px; max-height: 80vh; overflow-y: auto; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.18); font-size: 13px; } .tweaks-panel h4 { font-family: var(--heading-font); font-style: italic; font-size: 22px; margin-bottom: 4px; } .tweaks-row { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .tweaks-row > label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .tweaks-segment { display: flex; gap: 4px; flex-wrap: wrap; } .tweaks-segment button { font-family: var(--body-font); font-size: 12px; padding: 8px 12px; background: var(--ivory-2); border: 1px solid var(--rule); border-radius: 2px; color: var(--ink); cursor: pointer; flex: 1 1 auto; } .tweaks-segment button.active { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); } .swatch-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .swatch { height: 40px; border-radius: 2px; cursor: pointer; border: 2px solid transparent; display: flex; flex-direction: column; justify-content: flex-end; padding: 4px; font-size: 9px; color: var(--charcoal); letter-spacing: .1em; text-transform: uppercase; } .swatch.active { border-color: var(--charcoal); } /* Responsive grid helpers */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 32px); } @media (max-width: 960px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (max-width: 960px) { .hide-m { display: none !important; } }