/* ========================================================================== smk-futura.css — the futuristic layer. WHERE IT SITS. Loaded LAST from views/app_wrapper.php, after custom.css and smk-ui.css. smk-ui.css tuned the app to the SurveyJS Creator's flat, 4px, hairline language so the dashboard and the editor felt like one product. That was correct and is kept: this file does not undo it, it adds a *presentation* layer on top — · one accent RAMP (blue -> sky -> cyan) instead of one flat blue · glass surfaces where a panel floats over something · glow instead of hard rings for focus · an ambient field behind the composer only ...and leaves the working surfaces (tables, property grid, form controls) on smk-ui.css's values, because those are read all day and calm beats impressive there. SCOPE. Everything is under .smk-shell (the logged-in app) or .smk-home (the marketing page). The public survey renderer has its own theme and is never reached from here. THEMES. Tokens are defined light-first on the scope root, then re-declared under [data-theme-style="dark"], which app_wrapper.php stamps on . No colour has its only definition inside the dark block. RTL. Arabic is a first-class language here, so every directional value uses logical properties (margin-inline, inset-inline, padding-block). There are no `left:`/`right:` rules that would need an [dir="rtl"] counterpart. MOTION. Every animation is disabled wholesale by the prefers-reduced-motion block at the end of this file. TO REVERT: remove 'smk-futura.css' from the array in app_wrapper.php. Nothing else depends on it. ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ .smk-shell, .smk-home { /* The accent ramp. Three stops, used as a gradient for anything that should read as "the AI did this", and as flat --fx-a1 for ordinary UI accents. NO PURPLE — deliberate, the customer rejected it. The ramp travels blue -> sky -> cyan and stays inside the product's own blue family. Anything added here must stay in that family; do not reintroduce a violet/indigo mid-stop. */ --fx-a1: #2563eb; /* blue — primary actions, active nav (the brand blue) */ --fx-a2: #0284c7; /* sky — mid stop, never used alone */ --fx-a3: #06b6d4; /* cyan — trailing stop + "live" indicators */ --fx-ramp: linear-gradient(115deg, var(--fx-a1) 0%, var(--fx-a2) 48%, var(--fx-a3) 100%); --fx-ramp-soft: linear-gradient(115deg, rgba(37,99,235,.12) 0%, rgba(2,132,199,.10) 48%, rgba(6,182,212,.12) 100%); /* TWO ramps, and the reason. --fx-ramp is the DISPLAY ramp: gradient text, tints, glows. In dark mode its stops are lifted so they stay visible against a near-black ground. --fx-ramp-fill is the FILL ramp, used behind WHITE text (the rail's active item, New, Send, the topbar CTA). Those two needs pull in opposite directions: lifting a stop for legibility on black simultaneously destroys its contrast with the white text sitting on it. In light mode the two are identical; in dark mode the fill ramp keeps the saturated stops. */ --fx-ramp-fill: linear-gradient(115deg, #2563eb 0%, #0284c7 48%, #0891b2 100%); /* Glass. Two depths: chrome (sidebar, topbar) and floating (composer dock). */ --fx-glass: rgba(255, 255, 255, .72); --fx-glass-2: rgba(255, 255, 255, .88); --fx-glass-line: rgba(15, 23, 42, .08); --fx-blur: saturate(180%) blur(20px); /* Page ground. Not flat white: a very low-chroma tint so white cards have something to sit on and the glass has something to sample. */ --fx-bg: #f6f7fb; --fx-bg-2: #eef1f8; --fx-fg: rgba(15, 23, 42, .92); --fx-fg2: rgba(15, 23, 42, .60); --fx-fg3: rgba(15, 23, 42, .42); /* Glow replaces the hard focus ring. Two sizes: control and surface. */ --fx-glow-1: 0 0 0 3px rgba(37, 99, 235, .16); --fx-glow-2: 0 8px 30px rgba(37, 99, 235, .18); --fx-lift: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06); --fx-lift-2: 0 2px 4px rgba(15,23,42,.05), 0 18px 48px rgba(15,23,42,.10); --fx-r-sm: 8px; --fx-r-md: 12px; --fx-r-lg: 18px; --fx-r-xl: 26px; --fx-ease: cubic-bezier(.22, 1, .36, 1); } [data-theme-style="dark"] .smk-shell, [data-theme-style="dark"] .smk-home { /* Lifted stops: the same hues sit too dark to read on a near-black ground. */ --fx-a1: #60a5fa; --fx-a2: #38bdf8; --fx-a3: #22d3ee; --fx-ramp-soft: linear-gradient(115deg, rgba(96,165,250,.16) 0%, rgba(56,189,248,.12) 48%, rgba(34,211,238,.16) 100%); /* Deliberately NOT lifted — see the note on --fx-ramp-fill above. */ --fx-ramp-fill: linear-gradient(115deg, #1d4ed8 0%, #0369a1 48%, #0e7490 100%); --fx-glass: rgba(17, 24, 39, .72); --fx-glass-2: rgba(17, 24, 39, .90); --fx-glass-line: rgba(255, 255, 255, .09); --fx-bg: #0b1020; --fx-bg-2: #0f1629; --fx-fg: rgba(255, 255, 255, .92); --fx-fg2: rgba(255, 255, 255, .62); --fx-fg3: rgba(255, 255, 255, .40); --fx-glow-1: 0 0 0 3px rgba(37, 99, 235, .30); --fx-glow-2: 0 8px 30px rgba(37, 99, 235, .28); --fx-lift: 0 1px 2px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.36); --fx-lift-2: 0 2px 4px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.50); } /* ========================================================================== 2. SHELL — ground, rail, sidebar, topbar ========================================================================== */ .smk-shell { background: var(--fx-bg); } /* The rail keeps its width but stops being a grey column: it now reads as part of the page ground with only the active item carrying colour. */ .smk-shell__rail { background: transparent; border-inline-end: 1px solid var(--fx-glass-line); } .smk-shell__rail-item { border-radius: var(--fx-r-md); color: var(--fx-fg2); transition: background var(--smk-dur-base, 160ms) var(--fx-ease), color var(--smk-dur-base, 160ms) var(--fx-ease); } .smk-shell__rail-item:hover { background: var(--fx-ramp-soft); color: var(--fx-fg); } .smk-shell__rail-item.is-active { color: #fff; background: var(--fx-ramp-fill); box-shadow: var(--fx-glow-2); } /* The rail's active item is the only white-on-gradient text in the shell, so its icon must not inherit the muted colour from the base rule. */ .smk-shell__rail-item.is-active i { color: inherit; } .smk-shell__brand-mark { background: var(--fx-ramp-fill); color: #fff; border-radius: var(--fx-r-md); font-weight: 700; letter-spacing: -.02em; } /* --- Sidebar ------------------------------------------------------------- */ .smk-shell__nav { background: var(--fx-glass); -webkit-backdrop-filter: var(--fx-blur); backdrop-filter: var(--fx-blur); border-inline-end: 1px solid var(--fx-glass-line); } .smk-shell__nav-head { border-block-end: 1px solid var(--fx-glass-line); } .smk-shell__search .form-control { border-radius: var(--fx-r-md); border-color: transparent; background: var(--fx-bg-2); transition: box-shadow var(--smk-dur-base, 160ms) var(--fx-ease), background var(--smk-dur-base, 160ms) var(--fx-ease); } .smk-shell__search .form-control:focus { background: var(--fx-glass-2); border-color: transparent; box-shadow: var(--fx-glow-1); } /* --- "New" --------------------------------------------------------------- The one filled control in the sidebar. It is the sidebar's primary action, so it gets the ramp; everything below it is quiet by comparison. */ .smk-shell__new { display: flex; align-items: center; gap: 10px; margin: 12px 10px 6px; padding: 10px 12px; border-radius: var(--fx-r-md); background: var(--fx-ramp-fill); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; box-shadow: var(--fx-glow-2); transition: transform var(--smk-dur-base, 160ms) var(--fx-ease), box-shadow var(--smk-dur-base, 160ms) var(--fx-ease); } .smk-shell__new:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 34px rgba(37, 99, 235, .30); } .smk-shell__new:active { transform: translateY(0); } .smk-shell__new-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .20); font-size: 11px; } /* --- Recents ------------------------------------------------------------- Rows are single-line and ellipsised: a wrapped survey name turns the history into a wall of text and destroys the scannability that is the whole point of the list. */ .smk-shell__group--recent { margin-block-start: 10px; } .smk-shell__group-label { color: var(--fx-fg3); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .smk-shell__item--recent { border-radius: var(--fx-r-sm); color: var(--fx-fg2); font-size: 13px; } .smk-shell__item--recent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smk-shell__item--recent:hover { background: var(--fx-ramp-soft); color: var(--fx-fg); } /* Kind is carried by icon colour alone — a coloured pill per row would make 24 rows of history look like a bag of sweets. */ .smk-shell__item--recent[data-kind="survey"] i { color: var(--fx-a1); } .smk-shell__item--recent[data-kind="quiz"] i { color: #f59e0b; } .smk-shell__item--recent[data-kind="form"] i { color: #10b981; } .smk-shell__item--recent[data-kind="booking"] i { color: var(--fx-a3); } .smk-shell__item--recent[data-kind="embed"] i { color: var(--fx-fg3); } .smk-shell__item--recent[data-kind="chat"] i { color: var(--fx-a2); } /* --- Browse disclosure --------------------------------------------------- */ .smk-shell__browse { margin-block-start: 14px; border-block-start: 1px solid var(--fx-glass-line); } .smk-shell__browse-summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; color: var(--fx-fg3); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; list-style: none; user-select: none; } .smk-shell__browse-summary::-webkit-details-marker { display: none; } .smk-shell__browse-summary:hover { color: var(--fx-fg); } .smk-shell__browse-caret { font-size: 9px; transition: transform var(--smk-dur-base, 160ms) var(--fx-ease); } /* Rotating a chevron is direction-dependent: pointing "right" in Arabic means the opposite glyph direction, so the closed state is mirrored for RTL. */ [dir="rtl"] .smk-shell__browse-caret { transform: scaleX(-1); } .smk-shell__browse[open] .smk-shell__browse-caret { transform: rotate(90deg); } [dir="rtl"] .smk-shell__browse[open] .smk-shell__browse-caret { transform: scaleX(-1) rotate(-90deg); } /* --- Topbar -------------------------------------------------------------- */ .smk-shell__topbar { background: var(--fx-glass); -webkit-backdrop-filter: var(--fx-blur); backdrop-filter: var(--fx-blur); border-block-end: 1px solid var(--fx-glass-line); } .smk-shell__cta-btn { background: var(--fx-ramp-fill); border: 0; color: #fff; border-radius: var(--fx-r-md); box-shadow: var(--fx-glow-2); transition: transform var(--smk-dur-base, 160ms) var(--fx-ease), box-shadow var(--smk-dur-base, 160ms) var(--fx-ease); } .smk-shell__cta-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 34px rgba(37,99,235,.30); color:#fff; } /* ========================================================================== 3. COMPOSER — the centre column ========================================================================== */ .smk-cmp { position: relative; display: flex; flex-direction: column; isolation: isolate; /* keeps the aurora behind content, not the page */ padding-block: clamp(24px, 6vh, 72px) 8px; } .smk-cmp__inner { position: relative; z-index: 1; width: 100%; max-width: 780px; /* a measure that stays readable at 4K */ margin-inline: auto; padding-inline: 20px; } /* --- Ambient field ------------------------------------------------------- Three slow orbs plus a faint grid. It exists to make the empty state feel like a place rather than a blank page, and it is the ONLY decorative surface in the app — everywhere else stays flat. */ .smk-cmp__aurora { position: absolute; /* Bounded to the top of the column, not inset:0. Full-height orbs tinted the entire canvas — including the survey list below — and the page stopped reading as white. This keeps it a glow BEHIND the greeting and nothing more; the mask below fades its bottom edge so there is no visible seam. */ inset-block-start: 0; inset-inline: 0; height: 460px; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); /* Fades further as the transcript grows, so it never competes with text. */ transition: opacity 420ms var(--fx-ease); } .smk-cmp.is-chatting .smk-cmp__aurora { opacity: .35; } .smk-cmp__orb { position: absolute; width: 34vw; max-width: 420px; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); /* .42 was a wash, not an accent. At .16 the hue is present at the top of the page and the surfaces underneath stay white. */ opacity: .16; will-change: transform; } .smk-cmp__orb--a { background: var(--fx-a1); inset-block-start: -14%; inset-inline-start: -8%; animation: fx-drift-a 22s ease-in-out infinite; } .smk-cmp__orb--b { background: var(--fx-a3); inset-block-start: -6%; inset-inline-end: -10%; animation: fx-drift-b 26s ease-in-out infinite; } .smk-cmp__orb--c { background: var(--fx-a2); inset-block-start: 18%; inset-inline-start: 34%; opacity: .10; animation: fx-drift-c 30s ease-in-out infinite; } [data-theme-style="dark"] .smk-cmp__orb { opacity: .22; } [data-theme-style="dark"] .smk-cmp__orb--c { opacity: .14; } @keyframes fx-drift-a { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(6%,8%,0) scale(1.10)} } @keyframes fx-drift-b { 0%,100%{transform:translate3d(0,0,0) scale(1.06)} 50%{transform:translate3d(-7%,6%,0) scale(1)} } @keyframes fx-drift-c { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4%,-9%,0) scale(1.14)} } /* Grid: masked to fade toward the edges so it never reaches a hard border. */ .smk-cmp__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--fx-glass-line) 1px, transparent 1px), linear-gradient(to bottom, var(--fx-glass-line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000 0%, transparent 76%); mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000 0%, transparent 76%); opacity: .55; } /* --- Hero ---------------------------------------------------------------- */ .smk-cmp__hero { text-align: center; margin-block-end: 28px; } .smk-cmp__greeting { margin: 0 0 8px; font-size: clamp(28px, 4.2vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; /* The greeting is the one place the ramp becomes type. Fallback colour is declared first so a browser without background-clip still shows text. */ color: var(--fx-fg); background: var(--fx-ramp); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .smk-cmp__greeting { -webkit-text-fill-color: currentColor; background: none; } } .smk-cmp__sub { margin: 0; color: var(--fx-fg2); font-size: 15px; line-height: 1.5; } /* --- Dock ---------------------------------------------------------------- */ .smk-cmp__dock { position: relative; } .smk-cmp__kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-block-end: 12px; } .smk-cmp__kind { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--fx-glass-line); border-radius: 999px; background: var(--fx-glass-2); color: var(--fx-fg2); font-size: 13px; font-weight: 550; cursor: pointer; transition: color var(--smk-dur-base, 160ms) var(--fx-ease), border-color var(--smk-dur-base, 160ms) var(--fx-ease), box-shadow var(--smk-dur-base, 160ms) var(--fx-ease), transform var(--smk-dur-base, 160ms) var(--fx-ease); } .smk-cmp__kind:hover { color: var(--fx-fg); transform: translateY(-1px); } .smk-cmp__kind i { font-size: 12px; } .smk-cmp__kind.is-active { color: var(--fx-a1); border-color: transparent; background: var(--fx-ramp-soft); box-shadow: var(--fx-glow-1); } /* The input. A single rounded surface with the send button inside it, so the whole thing reads as one control rather than a field plus a button. */ .smk-cmp__box { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 10px 10px 10px 18px; border: 1px solid var(--fx-glass-line); border-radius: var(--fx-r-xl); background: var(--fx-glass-2); -webkit-backdrop-filter: var(--fx-blur); backdrop-filter: var(--fx-blur); box-shadow: var(--fx-lift); transition: box-shadow 200ms var(--fx-ease), border-color 200ms var(--fx-ease); } [dir="rtl"] .smk-cmp__box { padding: 10px 18px 10px 10px; } .smk-cmp__box:focus-within { border-color: transparent; box-shadow: var(--fx-lift-2), var(--fx-glow-1); } .smk-cmp__input { flex: 1 1 auto; min-height: 28px; max-height: 200px; padding: 4px 0; border: 0; background: none; color: var(--fx-fg); font: inherit; font-size: 15.5px; line-height: 1.5; resize: none; outline: none; overflow-y: auto; } .smk-cmp__input::placeholder { color: var(--fx-fg3); } .smk-cmp__send { flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--fx-ramp-fill); color: #fff; font-size: 14px; cursor: pointer; box-shadow: var(--fx-glow-2); transition: transform 160ms var(--fx-ease), opacity 160ms var(--fx-ease); } .smk-cmp__send:hover:not(:disabled) { transform: scale(1.06); } .smk-cmp__send:disabled { opacity: .34; cursor: default; box-shadow: none; } /* Arrow points "up/forward"; in RTL the glyph itself is fine, the button is already mirrored by flex order, so no transform is needed here. */ .smk-cmp__starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 14px; } .smk-cmp__starter { padding: 8px 14px; border: 1px solid var(--fx-glass-line); border-radius: 999px; background: transparent; color: var(--fx-fg2); font-size: 12.5px; cursor: pointer; transition: background 160ms var(--fx-ease), color 160ms var(--fx-ease), transform 160ms var(--fx-ease); } .smk-cmp__starter:hover { background: var(--fx-glass-2); color: var(--fx-fg); transform: translateY(-1px); } .smk-cmp__note { margin: 12px 0 0; text-align: center; color: var(--fx-fg3); font-size: 11.5px; } /* Chatting state: the dock leaves the middle of the page and pins under the transcript, which is what makes it feel like a chat rather than a form. */ .smk-cmp.is-chatting { padding-block-start: 0; min-height: calc(100vh - 190px); } .smk-cmp.is-chatting .smk-cmp__kinds, .smk-cmp.is-chatting .smk-cmp__starters { display: none; } .smk-cmp.is-chatting .smk-cmp__dock { position: sticky; inset-block-end: 0; padding-block: 12px; background: linear-gradient(to top, var(--fx-bg) 62%, transparent); } /* --- Transcript ---------------------------------------------------------- */ .smk-cmp__thread { display: none; } .smk-cmp.is-chatting .smk-cmp__thread { display: block; flex: 1 1 auto; padding-block: 24px 8px; } .smk-cmp__msg { display: flex; gap: 12px; margin-block-end: 18px; animation: fx-rise 320ms var(--fx-ease) both; } @keyframes fx-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .smk-cmp__avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; } .smk-cmp__msg--user .smk-cmp__avatar { background: var(--fx-bg-2); color: var(--fx-fg2); } .smk-cmp__msg--assistant .smk-cmp__avatar { background: var(--fx-ramp-fill); color: #fff; } .smk-cmp__bubble { flex: 1 1 auto; min-width: 0; } .smk-cmp__who { margin-block-end: 3px; color: var(--fx-fg3); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .smk-cmp__text { color: var(--fx-fg); font-size: 15px; line-height: 1.62; /* Model output includes long unbroken tokens (URLs, ids); without this they push the column wider than the page on mobile. */ overflow-wrap: anywhere; } /* Typing indicator */ .smk-cmp__typing .smk-cmp__bubble { display: flex; align-items: center; gap: 5px; padding-block-start: 8px; } .smk-cmp__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fx-fg3); animation: fx-blink 1.3s ease-in-out infinite; } .smk-cmp__dot:nth-child(2) { animation-delay: .18s; } .smk-cmp__dot:nth-child(3) { animation-delay: .36s; } @keyframes fx-blink { 0%,60%,100% { opacity: .28; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } } /* Chips — the guided build's Apply / Edit / language answers. */ .smk-cmp__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px 42px; /* aligns under the bubble, past the avatar */ } [dir="rtl"] .smk-cmp__chips { margin: -8px 42px 20px 0; } .smk-cmp__chip { padding: 8px 16px; border: 1px solid var(--fx-glass-line); border-radius: 999px; background: var(--fx-glass-2); color: var(--fx-fg); font-size: 13px; font-weight: 550; cursor: pointer; text-decoration: none; transition: background 160ms var(--fx-ease), transform 160ms var(--fx-ease), box-shadow 160ms var(--fx-ease); } .smk-cmp__chip:hover { transform: translateY(-1px); box-shadow: var(--fx-lift); text-decoration: none; color: var(--fx-fg); } .smk-cmp__chip--go { border-color: transparent; background: var(--fx-ramp-fill); color: #fff; } .smk-cmp__chip--go:hover { color: #fff; box-shadow: var(--fx-glow-2); } /* --- Recent cards -------------------------------------------------------- */ .smk-cmp__recents { margin-block-start: 40px; } .smk-cmp__recents-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 12px; } .smk-cmp__recents-title { margin: 0; color: var(--fx-fg3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .smk-cmp__recents-all { color: var(--fx-a1); font-size: 12.5px; font-weight: 600; text-decoration: none; } .smk-cmp__recents-all:hover { text-decoration: none; opacity: .8; } .smk-cmp__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .smk-cmp__card { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--fx-glass-line); border-radius: var(--fx-r-md); background: var(--fx-glass-2); color: var(--fx-fg); text-decoration: none; transition: transform 160ms var(--fx-ease), box-shadow 160ms var(--fx-ease); } .smk-cmp__card:hover { transform: translateY(-2px); box-shadow: var(--fx-lift); color: var(--fx-fg); text-decoration: none; } .smk-cmp__card:hover .smk-cmp__card-title { color: var(--fx-a1); } .smk-cmp__card-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--fx-r-sm); background: var(--fx-ramp-soft); color: var(--fx-a1); font-size: 13px; } .smk-cmp__card[data-kind="quiz"] .smk-cmp__card-icon { color: #f59e0b; } .smk-cmp__card[data-kind="form"] .smk-cmp__card-icon { color: #10b981; } .smk-cmp__card[data-kind="booking"] .smk-cmp__card-icon { color: var(--fx-a3); } .smk-cmp__card[data-kind="chat"] .smk-cmp__card-icon { color: var(--fx-a2); } .smk-cmp__card-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .smk-cmp__card-title { /* Explicit: the card is an , and custom.css colours anchor descendants blue, which made every recent look like an unvisited hyperlink. */ color: var(--fx-fg); font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smk-cmp__card-kind { color: var(--fx-fg3); font-size: 11.5px; } /* ========================================================================== 4. DASHBOARD BELOW THE FOLD ========================================================================== */ /* A rule the eye can rest on between "make something" and "look at numbers". */ .smk-dash-below { position: relative; margin-block-start: 48px; padding-block-start: 40px; border-block-start: 1px solid var(--fx-glass-line); } .smk-shell .smk-panel, .smk-shell .smk-survey-list, .smk-shell .smk-stat-tile { border-radius: var(--fx-r-md); border-color: var(--fx-glass-line); } .smk-shell .smk-stat-tile { transition: transform 160ms var(--fx-ease), box-shadow 160ms var(--fx-ease); } .smk-shell .smk-stat-tile:hover { transform: translateY(-2px); box-shadow: var(--fx-lift); } /* ========================================================================== 5. EDITOR — SurveyJS Creator chrome Only the chrome (toolbar, tabs, property panel header). The question canvas keeps the Creator's own look, because that is what the customer's survey actually looks like and restyling it would lie about the output. ========================================================================== */ /* LOAD ORDER — READ BEFORE EDITING. app_wrapper.php links survey-creator-core.css AFTER this file, so at equal specificity the Creator wins every tie. Every rule below is therefore prefixed with .smk-route-editor (the body class set in app_wrapper.php) to buy one extra class of specificity, and the handful that fight an already-compound Creator selector carry !important. Removing that prefix silently reverts this whole section — it will not error, it will just stop applying. */ /* --- Tab strip (Designer / Preview / Logic / …) --------------------------- */ .smk-route-editor .svc-tabbed-menu-item--selected { box-shadow: inset 0 -2px 0 var(--fx-a1); } .smk-route-editor .svc-tabbed-menu-item--selected .svc-tabbed-menu-item__text { color: var(--fx-a1); font-weight: 650; } .smk-route-editor .svc-tabbed-menu-item:hover .svc-tabbed-menu-item__text { color: var(--fx-fg); } /* --- Toolbox (the question palette) -------------------------------------- The palette is a long list read by scanning, so the hover target gets a tinted plate and a rounded corner instead of the default full-bleed grey. */ .smk-route-editor .svc-toolbox__item { border-radius: var(--fx-r-sm); transition: background 140ms var(--fx-ease), color 140ms var(--fx-ease); } .smk-route-editor .svc-toolbox__tool:hover .svc-toolbox__item { background: var(--fx-ramp-soft); } .smk-route-editor .svc-toolbox__tool:hover .svc-toolbox__item-title { color: var(--fx-a1); } /* --- Top bar + banner ----------------------------------------------------- */ .smk-route-editor .svc-creator__banner { background: var(--fx-ramp-fill); } .smk-route-editor .svc-top-bar { border-block-end: 1px solid var(--fx-glass-line); } /* --- Primary actions ------------------------------------------------------ The Creator paints its primary action with its own --primary variable, so re-pointing that one variable moves every primary button, toggle and progress bar in the editor at once — far fewer rules than restyling each. */ .smk-route-editor .svc-creator { --primary: var(--fx-a1); --primary-light: var(--fx-ramp-soft); --sjs-primary-backcolor: var(--fx-a1); --sjs-primary-backcolor-dark: var(--fx-a2); --sjs-primary-backcolor-light: var(--fx-ramp-soft); } /* --- Selected question ---------------------------------------------------- The Creator's default is a flat blue outline. A soft glow reads as "selected" without adding a second hard rectangle to a canvas that is already made of rectangles. */ .smk-route-editor .svc-question__content--selected { border-color: var(--fx-a1) !important; box-shadow: var(--fx-glow-1) !important; } /* --- Property grid (right panel) ------------------------------------------ Section headers were the same weight as their fields, so the panel read as one long undifferentiated list. */ .smk-route-editor .spg-title { letter-spacing: -.01em; } .smk-route-editor .spg-panel__title { color: var(--fx-fg); font-weight: 650; } .smk-route-editor .svc-side-bar { border-inline-start: 1px solid var(--fx-glass-line); } /* Focus inside the editor matches focus everywhere else in the app. */ .smk-route-editor .sd-input:focus, .smk-route-editor .spg-input:focus { box-shadow: var(--fx-glow-1) !important; border-color: var(--fx-a1) !important; } /* ========================================================================== 6. LANDING — accents only The marketing page keeps its glass/video hero; this only re-points its accent colour at the new ramp so the signed-out and signed-in products share one palette. ========================================================================== */ .smk-home .smk-grad-text { background: var(--fx-ramp); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .smk-home .smk-hero__blob--a { background: var(--fx-a1); } .smk-home .smk-hero__blob--b { background: var(--fx-a3); } .smk-home .smk-hero__blob--c { background: var(--fx-a2); } /* --- The hero's "Create with AI" box ------------------------------------ Same control the signed-in composer is, one step earlier in the funnel, so it should look like the same control. These rules re-point its pale blue/cyan accent at the ramp and match the app's radii and glow. SPECIFICITY NOTE: partials/ai_try_widget.php emits its CSS as an inline