/* ============================================================================ Palopay Calculator — app.css Compact layout + semantic theme system (light variants only). Component structure lives in calc-ui.css (driven by --ui-*). Themes set SEMANTIC vars; the scope mappings translate them to --ui-*. Selected theme is an attribute on . ============================================================================ */ /* ---- semantic defaults (Light · Frame, the recommended palette) ---------- */ :root { color-scheme: light; --canvas: var(--bone); --canvas-2: var(--bone); --ink: var(--off-black); --muted: color-mix(in srgb, var(--off-black) 52%, var(--bone)); --faint: color-mix(in srgb, var(--off-black) 40%, var(--bone)); --line: color-mix(in srgb, var(--off-black) 14%, transparent); --accent: var(--claret); --on-accent: var(--bone); --link: var(--claret); --panel: #F4F1E4; /* raised builder card (transparent unless a theme lifts it) */ --card-bg: transparent; --card-bd: transparent; --card-pad: 0px; --card-shadow: none; /* quote rail */ --rail-bg: #F4F1E4; --rail-ink: var(--off-black); --rail-muted: color-mix(in srgb, var(--off-black) 52%, var(--bone)); --rail-line: color-mix(in srgb, var(--off-black) 14%, transparent); --rail-surface: var(--bone); --rail-accent: var(--claret); --rail-on-accent:var(--bone); --rail-field: var(--bone); --rail-shadow: 0 14px 40px rgba(31,14,14,.14); --rail-bd: color-mix(in srgb, var(--off-black) 12%, transparent); /* topbar */ --bar-bg: var(--off-black); --bar-ink: var(--bone); --bar-line: color-mix(in srgb, var(--bone) 14%, transparent); --pill-bg: var(--bone); --pill-ink: var(--off-black); /* footer */ --foot-bg: var(--off-black); --foot-ink: var(--bone); --foot-muted: color-mix(in srgb, var(--bone) 55%, var(--off-black)); /* tunables (Tweaks) */ --opt-r: 10px; /* button corner radius */ --plat-cols: 1fr 1fr; /* platform grid */ --row-pad: 16px; /* builder row padding (density) */ --label-col: 124px; } /* ====================== LIGHT · RAIL (dark quote sidebar) ============== */ [data-theme="rail"] { --bar-bg: var(--bone); --bar-ink: var(--off-black); --bar-line: color-mix(in srgb, var(--off-black) 12%, transparent); --pill-bg: var(--claret); --pill-ink: var(--bone); --foot-bg: var(--bone); --foot-ink: var(--off-black); --foot-muted: color-mix(in srgb, var(--off-black) 52%, var(--bone)); } /* Rail sidebar tone — choose claret (default) / ink / greige via data-railtone */ [data-theme="rail"][data-railtone="claret"], [data-theme="rail"]:not([data-railtone]) { --rail-bg: var(--claret); --rail-ink: var(--bone); --rail-muted: color-mix(in srgb, var(--bone) 60%, var(--claret)); --rail-line: color-mix(in srgb, var(--bone) 24%, transparent); --rail-surface: var(--claret-700); --rail-accent: var(--bone); --rail-on-accent: var(--claret); --rail-field: var(--claret-700); --rail-shadow: 0 18px 50px rgba(74,4,20,.34); --rail-bd: transparent; } /* engage card must contrast against a claret rail */ [data-theme="rail"][data-railtone="claret"] .pp-engage, [data-theme="rail"]:not([data-railtone]) .pp-engage { background: var(--off-black); } [data-theme="rail"][data-railtone="ink"] { --rail-bg: var(--off-black); --rail-ink: var(--bone); --rail-muted: color-mix(in srgb, var(--bone) 58%, var(--off-black)); --rail-line: color-mix(in srgb, var(--bone) 18%, transparent); --rail-surface: color-mix(in srgb, var(--bone) 7%, var(--off-black)); --rail-accent: var(--bone); --rail-on-accent: var(--off-black); --rail-field: color-mix(in srgb, var(--bone) 9%, var(--off-black)); --rail-shadow: 0 18px 50px rgba(31,14,14,.30); --rail-bd: transparent; } [data-theme="rail"][data-railtone="greige"] { --rail-bg: #DED9C2; --rail-ink: var(--off-black); --rail-muted: color-mix(in srgb, var(--off-black) 50%, #DED9C2); --rail-line: color-mix(in srgb, var(--off-black) 16%, transparent); --rail-surface: #E9E5D2; --rail-accent: var(--claret); --rail-on-accent: var(--bone); --rail-field: #E9E5D2; --rail-shadow: 0 14px 40px rgba(31,14,14,.12); --rail-bd: color-mix(in srgb, var(--off-black) 12%, transparent); } /* ====================== LIGHT · PAPER (floating cards on greige) ====== */ [data-theme="paper"] { --canvas: #E4E0CC; --canvas-2: #E4E0CC; --panel: #FBFAF2; --card-bg: #F6F3E7; --card-bd: color-mix(in srgb, var(--off-black) 9%, transparent); --card-pad: 24px; --card-shadow: 0 12px 36px rgba(31,14,14,.10); --rail-bg: #F6F3E7; --rail-surface: #FBFAF2; --rail-field: #FBFAF2; --bar-bg: var(--bone); --bar-ink: var(--off-black); --bar-line: color-mix(in srgb, var(--off-black) 12%, transparent); --pill-bg: var(--claret); --pill-ink: var(--bone); } /* ============================ SCOPE → --ui MAPPING ===================== */ .scope-builder { --ui-fg: var(--ink); --ui-muted: var(--muted); --ui-line: var(--line); --ui-surface: var(--panel); --ui-accent: var(--accent); --ui-on-accent: var(--on-accent); --ui-field-bg: var(--panel); --ui-opt-r: var(--opt-r); --ui-plat-cols: var(--plat-cols); } .scope-cart { --ui-fg: var(--rail-ink); --ui-muted: var(--rail-muted); --ui-line: var(--rail-line); --ui-surface: var(--rail-surface); --ui-accent: var(--rail-accent); --ui-on-accent: var(--rail-on-accent); --ui-field-bg: var(--rail-field); --ui-opt-r: var(--opt-r); } /* ============================== LAYOUT ================================= */ html, body { background: var(--canvas); } body { background: var(--canvas); color: var(--ink); } a { color: inherit; } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* topbar */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--bar-bg); color: var(--bar-ink); border-bottom: 1px solid var(--bar-line); } .bar-left { display: flex; align-items: center; gap: 14px; } .wm { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; } .bar-right { display: flex; align-items: center; gap: 10px; } .btn-pill { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: var(--pill-bg); color: var(--pill-ink); font-family: var(--font); font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: var(--r-pill); border: none; cursor: pointer; text-decoration: none; } /* hero — compact */ .hero { padding: 32px 0 22px; } .eyebrow { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: var(--link); margin-bottom: 12px; } .hero h1 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 42px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; max-width: 16ch; } .hero p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.5; color: var(--muted); } /* main grid */ .main { display: grid; grid-template-columns: 1fr 344px; gap: 32px; align-items: start; padding-bottom: 56px; } .scope-builder { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--r-lg); padding: var(--card-pad); box-shadow: var(--card-shadow); } .scope-builder .pp-group { display: grid; grid-template-columns: var(--label-col) 1fr; gap: 24px; padding: var(--row-pad) 0; border-top: 1px solid var(--line); align-items: start; } .scope-builder .pp-group:first-child { border-top: none; padding-top: 4px; } .scope-builder .pp-label { margin-bottom: 0; flex-direction: column; gap: 6px; } /* Reuse toggle has no label, so it falls into the narrow label column and wraps. Put it in the options column and keep the text on one line. */ .scope-builder .pp-group > .pp-reuse { grid-column: 2; width: fit-content; white-space: nowrap; } /* quote rail */ .rail-anchor { position: sticky; top: 76px; } .scope-cart { background: var(--rail-bg); color: var(--rail-ink); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--rail-shadow); border: 1px solid var(--rail-bd); } .rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .rail-head h2 { margin: 0; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--rail-muted); white-space: nowrap; } .clear { background: none; border: none; cursor: pointer; font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--rail-accent); white-space: nowrap; } .clear:disabled { opacity: .35; cursor: default; } .rail-fringe { margin-bottom: 8px; } .rail-note { font-size: 11px; color: var(--rail-muted); margin: 8px 0 14px; line-height: 1.45; } .rail-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; } .rail-foot .ref { font-size: 10.5px; font-family: var(--mono); color: var(--rail-muted); } /* disclaimer */ .disclaimer { border-top: 1px solid var(--line); padding: 26px 0 30px; } .disclaimer-grid { display: grid; grid-template-columns: var(--label-col) 1fr; gap: 24px; } .disclaimer .lbl { font-size: 13px; font-weight: 700; } .disclaimer p { margin: 0; max-width: 70ch; color: var(--muted); font-size: 13px; line-height: 1.55; } /* footer */ footer { background: var(--foot-bg); color: var(--foot-ink); } .footer-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding: 26px 0; } .footer-in .fwm { font-weight: 800; font-size: 24px; letter-spacing: -0.02em; } .footer-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; color: var(--foot-muted); font-size: 12px; } /* ============================== RESPONSIVE ============================= */ @media (max-width: 900px) { .main { grid-template-columns: 1fr; gap: 22px; } .rail-anchor { position: static; } .scope-builder .pp-group { grid-template-columns: 1fr; gap: 10px; } .scope-builder .pp-group > .pp-reuse { grid-column: 1; } .disclaimer-grid { grid-template-columns: 1fr; gap: 8px; } } @media (max-width: 560px) { :root { --plat-cols: 1fr; } .wrap { padding: 0 16px; } .topbar { padding: 10px 16px; } .hero { padding: 24px 0 18px; } .hero h1 { font-size: clamp(26px, 8vw, 34px); } .btn-pill .pill-label { display: none; } .btn-pill { padding: 9px 13px; } .footer-in { padding: 22px 0; } }