/* ========================================================================= actionly.ca — BRAND THEME (loaded after actionly.css; opt-in per page/portal) Direction: "Evidence & Action" - Sora for display and numbers that matter, Manrope for reading, IBM Plex Mono for timestamps/codes - green (#0AB884) = action & verified, ink (#1A2838) = trust; surfaces carry a faint green tint - the logo's check + three ticks become the product's motif: loader, progress, success, bullets Activate with . Classes prefixed b- are brand layout pieces. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap'); html[data-theme="brand"] { --font: "Manrope", "Inter", system-ui, sans-serif; --font-display: "Sora", "Manrope", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --ink-50: #F3F7F5; /* app background: off-white with a breath of green */ --ink-100: #E6EEEA; --ink-200: #D3DED8; --radius: 14px; --radius-sm: 10px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgba(15,24,34,.05), 0 2px 8px rgba(15,24,34,.05); --shadow: 0 8px 24px rgba(15,24,34,.08); --shadow-lg: 0 24px 60px rgba(15,24,34,.18); --glow-green: 0 10px 28px rgba(10,184,132,.28); --tick-blue: #388CF4; --tick-yellow: #FCB938; --tick-red: #FC6656; } html[data-theme="brand"] body { font-family: var(--font); background: var(--ink-50); letter-spacing: -.005em; } html[data-theme="brand"] h1, html[data-theme="brand"] h2, html[data-theme="brand"] h3, html[data-theme="brand"] .display { font-family: var(--font-display); letter-spacing: -.02em; } html[data-theme="brand"] .mono, html[data-theme="brand"] .num, html[data-theme="brand"] .kpi .value, html[data-theme="brand"] .time { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ---- controls ---- */ html[data-theme="brand"] .btn { border-radius: 999px; height: 40px; padding: 0 18px; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } html[data-theme="brand"] .btn-sm { height: 32px; padding: 0 14px; } html[data-theme="brand"] .btn-lg { height: 50px; padding: 0 26px; font-size: 15.5px; } html[data-theme="brand"] .btn-primary { background: linear-gradient(180deg, #11C48E, #0AB884); box-shadow: var(--glow-green); } html[data-theme="brand"] .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(10,184,132,.34); background: linear-gradient(180deg, #14CC94, #0BB588); } html[data-theme="brand"] .btn-primary:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(10,184,132,.25); } html[data-theme="brand"] .btn-dark { background: linear-gradient(180deg, #22334A, #1A2838); box-shadow: 0 8px 20px rgba(15,24,34,.25); } html[data-theme="brand"] .btn-secondary { background: #fff; border-color: var(--ink-200); } html[data-theme="brand"] .btn-secondary:hover { border-color: var(--ink-300); transform: translateY(-1px); box-shadow: var(--shadow-sm); } html[data-theme="brand"] input[type=text], html[data-theme="brand"] input[type=email], html[data-theme="brand"] input[type=password], html[data-theme="brand"] input[type=number], html[data-theme="brand"] input[type=search], html[data-theme="brand"] input[type=tel], html[data-theme="brand"] input[type=date], html[data-theme="brand"] input[type=time], html[data-theme="brand"] select, html[data-theme="brand"] textarea { border-radius: 12px; height: 46px; padding: 10px 14px; font-size: 14.5px; border-color: var(--ink-200); background: #fff; transition: border-color .15s, box-shadow .15s; } html[data-theme="brand"] textarea { height: auto; } html[data-theme="brand"] input:focus, html[data-theme="brand"] select:focus, html[data-theme="brand"] textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(10,184,132,.16); } html[data-theme="brand"] .lbl { font-size: 13px; color: var(--ink-700); margin-bottom: 7px; } html[data-theme="brand"] .field.invalid input, html[data-theme="brand"] .field.invalid select { border-color: var(--red); box-shadow: 0 0 0 4px rgba(252,102,86,.14); } html[data-theme="brand"] .field.invalid .help { color: var(--red-700); } html[data-theme="brand"] .card { border-radius: var(--radius); border-color: rgba(26,40,56,.08); } html[data-theme="brand"] .badge { border-radius: 999px; padding: 3px 10px; font-weight: 700; } html[data-theme="brand"] .alert { border-radius: 12px; } /* ========================================================================= MOTIF — logo check + three ticks ========================================================================= */ .b-mark { width: 64px; height: 64px; display: inline-block; } .b-mark svg { width: 100%; height: 100%; overflow: visible; } .b-mark .check { fill: none; stroke: var(--green); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 170; stroke-dashoffset: 170; animation: b-draw 1.1s cubic-bezier(.65,0,.35,1) .35s forwards; } .b-mark .t { stroke-width: 11; stroke-linecap: round; opacity: 0; transform-origin: center; animation: b-pop .5s cubic-bezier(.2,.9,.3,1.4) forwards; } .b-mark .t.blue { stroke: var(--tick-blue); animation-delay: 1.15s; } .b-mark .t.yellow { stroke: var(--tick-yellow); animation-delay: 1.3s; } .b-mark .t.red { stroke: var(--tick-red); animation-delay: 1.45s; } .b-mark.static .check { stroke-dashoffset: 0; animation: none; } .b-mark.static .t { opacity: 1; animation: none; } .b-mark.white .check { stroke: #fff; } @keyframes b-draw { to { stroke-dashoffset: 0; } } @keyframes b-pop { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 100% { opacity: 1; transform: none; } } /* three-tick loader */ .b-loader { display: inline-flex; gap: 6px; align-items: flex-end; height: 22px; } .b-loader i { display: block; width: 6px; height: 18px; border-radius: 3px; background: var(--tick-blue); animation: b-bounce 1s ease-in-out infinite; } .b-loader i:nth-child(2) { background: var(--tick-yellow); animation-delay: .15s; } .b-loader i:nth-child(3) { background: var(--tick-red); animation-delay: .3s; } @keyframes b-bounce { 0%, 100% { transform: scaleY(.45); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } } /* tick bullets */ .b-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .b-ticks li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.45; } .b-ticks .tk { width: 28px; height: 28px; border-radius: 9px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); } .b-ticks .tk svg { width: 14px; height: 14px; } .b-ticks strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #fff; margin-bottom: 2px; } .b-ticks span { color: #A9B6C4; font-size: 13.5px; } /* faint tick pattern (decorative) */ .b-pattern { position: absolute; inset: 0; pointer-events: none; opacity: .14; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.35) 1px, transparent 1.6px); background-size: 26px 26px; mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0) 70%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0) 70%); } .b-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); opacity: .35; pointer-events: none; } /* ========================================================================= AUTH / PUBLIC LAYOUT (sign in, sign up, sandbox checkout) ========================================================================= */ .b-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); background: var(--ink-50); } .b-stage { position: relative; overflow: hidden; color: #fff; padding: 44px 48px; display: flex; flex-direction: column; background: linear-gradient(160deg, #0F1822 0%, #1A2838 55%, #1E3147 100%); } .b-stage .b-glow.g1 { background: var(--green); top: -140px; right: -120px; } .b-stage .b-glow.g2 { background: var(--tick-blue); bottom: -220px; left: -160px; opacity: .18; } .b-stage .brandline { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; position: relative; } .b-stage .brandline .b-mark { width: 34px; height: 34px; } .b-stage .brandline .dotca { color: var(--green); } .b-stage .hero { margin: auto 0; position: relative; max-width: 520px; } .b-stage .hero .b-mark { width: 92px; height: 92px; margin-bottom: 26px; } .b-stage h2 { color: #fff; font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; margin: 0 0 14px; } .b-stage h2 em { font-style: normal; color: var(--green); } .b-stage .lead { font-size: 16px; color: #B8C4D1; line-height: 1.55; margin: 0 0 30px; max-width: 460px; } .b-stage .foot { position: relative; display: flex; gap: 18px; align-items: center; font-size: 12.5px; color: #8493A5; } .b-stage .foot .pill { border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 4px 10px; color: #C9D3DF; } .b-panel { display: flex; align-items: center; justify-content: center; padding: 40px 28px; } .b-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid rgba(26,40,56,.08); border-radius: var(--radius-lg); padding: 36px 36px 30px; box-shadow: var(--shadow); animation: b-rise .5s cubic-bezier(.2,.8,.2,1) both; } .b-card.wide { max-width: 720px; } .b-card .logo { height: 34px; margin-bottom: 22px; display: block; } .b-card h1 { font-family: var(--font-display); font-size: 26px; letter-spacing: -.025em; margin-bottom: 6px; } .b-card .sub { color: var(--ink-500); font-size: 14px; margin-bottom: 22px; } .b-card .field { margin-bottom: 16px; } .b-card .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; margin-bottom: 18px; } .b-card .row a { font-weight: 600; } .b-card .meta { margin-top: 20px; font-size: 12.5px; color: var(--ink-500); text-align: center; } .b-card .meta a { font-weight: 600; } @keyframes b-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* demo account chips (sign-in) */ .b-demo { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--ink-200); } .b-demo .t { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); font-weight: 700; margin-bottom: 10px; } .b-demo .chips { display: flex; flex-wrap: wrap; gap: 8px; } .b-demo .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--ink-200); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink-700); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; } .b-demo .chip:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; } .b-demo .chip .av { width: 20px; height: 20px; border-radius: 50%; background: var(--green-50); color: var(--green-700); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); } /* step rail (sign-up) */ .b-rail { display: flex; align-items: center; gap: 0; margin: 4px 0 26px; } .b-rail .st { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-400); cursor: pointer; white-space: nowrap; } .b-rail .st .n { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink-200); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--ink-400); background: #fff; transition: all .2s; } .b-rail .st .n svg { width: 14px; height: 14px; display: none; } .b-rail .st.active { color: var(--ink); } .b-rail .st.active .n { border-color: var(--green); color: var(--green-700); box-shadow: 0 0 0 4px rgba(10,184,132,.14); } .b-rail .st.done .n { background: var(--green); border-color: var(--green); color: #fff; } .b-rail .st.done .n svg { display: block; } .b-rail .st.done .n b { display: none; } .b-rail .ln { flex: 1; height: 2px; background: var(--ink-200); margin: 0 12px; min-width: 18px; border-radius: 2px; } .b-rail .ln.done { background: var(--green); } @media (max-width: 720px) { .b-rail .st span { display: none; } } /* pricing hero (sign-up) */ .b-price { background: linear-gradient(160deg, #0F1822, #1A2838); color: #fff; border-radius: 16px; padding: 22px 24px; position: relative; overflow: hidden; } .b-price .b-glow { width: 260px; height: 260px; top: -120px; right: -80px; background: var(--green); opacity: .35; } .b-price .l { font-size: 12.5px; color: #A9B6C4; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; position: relative; } .b-price .v { font-family: var(--font-display); font-size: 56px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 6px 0 2px; position: relative; } .b-price .v small { font-family: var(--font); font-size: 14px; font-weight: 500; color: #B8C4D1; letter-spacing: 0; margin-left: 8px; } .b-price .lines { position: relative; margin-top: 14px; display: grid; gap: 6px; font-size: 13.5px; color: #C9D3DF; } .b-price .lines div { display: flex; justify-content: space-between; gap: 12px; } .b-price .lines b { color: #fff; font-family: var(--mono); font-weight: 600; } .b-price .note { position: relative; margin-top: 12px; font-size: 12px; color: #8493A5; } .b-price .confirm { position: relative; margin-top: 10px; font-size: 12px; color: var(--green); display: flex; align-items: center; gap: 6px; } .b-stepper { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .b-stepper .field { margin: 0; } .b-stepper .hint { font-size: 12px; color: var(--ink-500); margin-top: 6px; } .b-examples { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; } .b-examples th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); padding: 6px 8px; border-bottom: 1px solid var(--ink-100); } .b-examples td { padding: 7px 8px; border-bottom: 1px solid var(--ink-100); font-family: var(--mono); } .b-examples tr:last-child td { border-bottom: 0; } .b-summary { border: 1px solid var(--ink-200); border-radius: 14px; overflow: hidden; } .b-summary div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--ink-100); font-size: 13.5px; } .b-summary div:last-child { border-bottom: 0; background: var(--green-50); font-weight: 700; } .b-summary div b { font-family: var(--mono); } .b-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .b-pending .badge { font-size: 11px; } .b-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; } .b-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); flex: 0 0 18px; } /* trust strip under the form */ .b-trust { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 18px; font-size: 12px; color: var(--ink-400); flex-wrap: wrap; } .b-trust span { display: inline-flex; align-items: center; gap: 6px; } .b-trust svg { width: 13px; height: 13px; color: var(--green); } @media (max-width: 960px) { .b-auth { grid-template-columns: 1fr; } .b-stage { padding: 28px 24px 26px; min-height: auto; } .b-stage .hero { margin: 22px 0 8px; } .b-stage .hero .b-mark { width: 56px; height: 56px; margin-bottom: 14px; } .b-stage h2 { font-size: 26px; } .b-stage .lead { margin-bottom: 18px; } .b-stage .b-ticks { display: none; } .b-stage .foot { display: none; } .b-panel { padding: 24px 16px 40px; } .b-card { padding: 26px 22px; } .b-stepper { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .b-mark .check, .b-mark .t, .b-card, .b-loader i { animation: none !important; opacity: 1; stroke-dashoffset: 0; } } /* inline field errors used by the sign-up form */ html[data-theme="brand"] .field .err { display: none; font-size: 12px; color: var(--red-700); margin-top: 6px; } html[data-theme="brand"] .field.invalid .err { display: block; } html[data-theme="brand"] .field .hint { font-size: 12px; color: var(--ink-500); margin-top: 6px; }