/* ==========================================================================
NovaPersona — Violet & Gold Dark Theme
--------------------------------------------------------------------------
Loaded AFTER the Webflow stylesheet. It never edits the base sheet; it only
restates the colour half of every rule that carried one, so the layout,
spacing and interactions stay exactly as Webflow published them.
Palette
violet #1e0038 (brand base)
gold #cba358 (brand accent)
========================================================================== */
:root,
.body,
.style-guide {
/* ---- surfaces (dark → light) ---- */
--dk-bg: #140026; /* deepest ground, page canvas */
--dk-bg-2: #1e0038; /* brand violet, alternating sections */
--dk-surface: #24073f; /* cards, nav, inputs */
--dk-surface-2: #2d0f50; /* raised cards, pills, dark buttons */
--dk-surface-3: #391a63; /* hover state for raised surfaces */
/* ---- hairlines ---- */
--dk-line: rgba(203, 163, 88, .20);
--dk-line-2: rgba(203, 163, 88, .38);
--dk-line-solid: #3a2160;
/* ---- accent ---- */
--dk-gold: #cba358;
--dk-gold-2: #e0c184;
--dk-gold-deep: #a8823f;
--dk-gold-soft: rgba(203, 163, 88, .14);
--dk-on-gold: #1a0030;
/* ---- type ---- */
--dk-text: #f4eee3; /* headings, primary copy */
--dk-text-2: #c6b8d6; /* body copy, secondary */
--dk-text-3: #9384ab; /* captions, meta, disabled */
/* ---- effects ---- */
--dk-shadow: 0 24px 60px rgba(0, 0, 0, .55);
--dk-glow: 0 0 0 1px rgba(203, 163, 88, .28);
color-scheme: dark;
}
/* --------------------------------------------------------------------------
Base ground
-------------------------------------------------------------------------- */
/* A soft violet aurora on the root element keeps large flat areas from reading
as dead black-purple. It sits on so nothing in the document stacking
order has to be touched. */
html {
background-color: var(--dk-bg);
background-image:
radial-gradient(1100px 620px at 12% 0%, rgba(90, 34, 150, .38), transparent 62%),
radial-gradient(900px 520px at 92% 6%, rgba(203, 163, 88, .09), transparent 60%),
radial-gradient(1000px 700px at 50% 100%, rgba(58, 18, 104, .42), transparent 65%);
background-attachment: fixed;
background-repeat: no-repeat;
}
body,
body.body,
body.style-guide {
background-color: transparent;
color: var(--dk-text-2);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
background: var(--dk-gold);
color: var(--dk-on-gold);
}
::-moz-selection {
background: var(--dk-gold);
color: var(--dk-on-gold);
}
/* Scrollbar */
* {
scrollbar-color: var(--dk-gold-deep) var(--dk-bg);
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--dk-bg);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(var(--dk-gold-deep), #6b3f8f);
border: 2px solid var(--dk-bg);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(var(--dk-gold), #8a55b3);
}
/* ==========================================================================
2. Generated layer - every colour-bearing rule from the Webflow sheet,
restated for the dark palette. Selectors match the source exactly.
========================================================================== */
mark {
color: var(--dk-on-gold);
background: var(--dk-gold);
}
body {
color: var(--dk-text);
background-color: var(--dk-surface);
}
.w-button {
color: var(--dk-on-gold);
background-color: var(--dk-gold);
}
.w-webflow-badge {
box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.5);
color: var(--dk-text-3) !important;
background-color: var(--dk-surface) !important;
}
blockquote {
border-left: 5px solid var(--dk-line);
}
.w-form-done {
background-color: var(--dk-surface-2);
}
.w-form-fail {
background-color: rgba(234,56,76,.16);
}
.w-input, .w-select {
color: var(--dk-text);
background-color: var(--dk-surface);
border: 1px solid var(--dk-line);
}
.w-input::placeholder, .w-select::placeholder {
color: var(--dk-text-3);
}
.w-input:focus, .w-select:focus {
border-color: var(--dk-gold);
}
.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
background-color: var(--dk-surface);
}
.w-select {
background-color: var(--dk-surface);
}
.w-file-upload-default, .w-file-upload-uploading, .w-file-upload-success {
color: var(--dk-text);
}
.w-file-upload-uploading-btn {
background-color: var(--dk-surface);
border: 1px solid var(--dk-line);
}
.w-file-upload-file {
background-color: var(--dk-surface);
border: 1px solid var(--dk-line);
}
.w-file-upload-label {
background-color: var(--dk-surface);
border: 1px solid var(--dk-line);
}
.w-widget-twitter-count-shim {
background: var(--dk-surface);
border: 1px solid var(--dk-line);
}
.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
color: var(--dk-text-3);
}
.w-widget-twitter-count-shim:not(.w--vertical):before {
border-color: #75869600 var(--dk-line) #75869600 #75869600;
}
.w-widget-twitter-count-shim:not(.w--vertical):after {
border-color: #fff0 var(--dk-line) #fff0 #fff0;
}
.w-widget-twitter-count-shim.w--vertical:before {
border-color: var(--dk-line) #75869600 #75869600;
}
.w-widget-twitter-count-shim.w--vertical:after {
border-color: var(--dk-line) #fff0 #fff0;
}
.w-background-video {
color: var(--dk-text);
}
.w-slider {
background: var(--dk-surface-2);
}
.w-slider-nav.w-shadow > div {
box-shadow: 0 0 3px rgba(0,0,0,.5);
}
.w-slider-nav-invert {
color: var(--dk-text);
}
.w-slider-nav-invert > div {
background-color: rgba(48,18,90,.6);
}
.w-slider-nav-invert > div.w-active {
background-color: var(--dk-surface-2);
}
.w-slider-dot {
background-color: rgba(245,239,228,.45);
}
.w-slider-dot.w-active {
background-color: var(--dk-surface);
}
.w-slider-dot:focus {
box-shadow: 0 0 0 2px rgba(203,163,88,.5);
}
.w-slider-arrow-left, .w-slider-arrow-right {
color: var(--dk-text);
}
.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link {
color: var(--dk-text);
}
.w-dropdown-list {
background: var(--dk-surface-2);
}
.w-dropdown-link {
color: var(--dk-text);
}
.w-dropdown-link.w--current {
color: var(--dk-gold);
}
.w-lightbox-backdrop {
color: var(--dk-text);
background: rgba(10,0,20,.92);
}
.w-lightbox-caption {
background: rgba(12,0,24,.55);
}
.w-lightbox-thumbnail {
background: var(--dk-surface-2);
}
.w-lightbox-spinner:after {
border-bottom-color: var(--dk-line);
}
.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
outline: 2px solid var(--dk-gold);
}
.w-nav {
background: var(--dk-surface-2);
}
.w-nav-brand {
color: var(--dk-text);
}
.w-nav-link {
color: var(--dk-text);
}
.w-nav-link.w--current {
color: var(--dk-gold);
}
[data-nav-menu-open] {
background: var(--dk-surface-2);
}
.w-nav-button.w--open {
color: var(--dk-text);
background-color: var(--dk-surface-2);
}
.w-tab-link {
color: var(--dk-text);
background-color: var(--dk-surface-2);
}
.w-tab-link.w--current {
background-color: var(--dk-surface-2);
}
.w-dyn-empty {
background-color: var(--dk-surface-2);
}
.w-checkbox-input--inputType-custom {
border: 1px solid var(--dk-line);
}
.w-checkbox-input--inputType-custom.w--redirected-checked {
background-color: var(--dk-gold);
border-color: var(--dk-gold);
}
.w-checkbox-input--inputType-custom.w--redirected-focus {
box-shadow: 0 0 3px 1px rgba(203,163,88,.45);
}
.w-backgroundvideo-backgroundvideoplaypausebutton:focus-visible {
outline: 2px solid var(--dk-gold);
}
body {
background-color: var(--dk-surface);
color: var(--dk-text-2);
}
h1 {
color: var(--dk-text);
}
h2 {
color: var(--dk-text);
}
h3 {
color: var(--dk-text);
}
h4 {
color: var(--dk-text);
}
h5 {
color: var(--dk-text);
}
p {
color: var(--dk-text-2);
}
blockquote {
border-left: 5px solid var(--dk-line);
}
.styleguide-heading {
color: var(--dk-text);
}
.grey-text {
color: var(--dk-text-2);
}
.typography-card {
background-color: var(--dk-surface-2);
}
.text-107px {
color: var(--dk-text);
}
.text-55px {
color: var(--dk-text-2);
}
.text-55px.white {
color: var(--dk-text);
}
.text-55px.black {
color: var(--dk-text);
}
.text-35px {
color: var(--dk-text);
}
.text-35px.cta {
color: var(--dk-text);
}
.text-24px {
color: var(--dk-text);
}
.text-24px.grey-01 {
color: var(--dk-text-2);
}
.body-text {
color: var(--dk-text-2);
}
.body-text.black {
color: var(--dk-text);
}
.body-text.cat {
color: var(--dk-text);
}
.text-18px {
color: var(--dk-text-2);
}
.text-18px.black {
color: var(--dk-text);
}
.text-18px.semi-bold {
color: var(--dk-text);
}
.text-18px.grey-02 {
color: var(--dk-text-2);
}
.text-18px.white {
color: var(--dk-text);
}
.text-18px.grey {
color: var(--dk-text);
}
.text-18px.grey-04 {
color: var(--dk-text-3);
}
.text-28px {
color: var(--dk-text);
}
.text-28px.grey-01 {
color: var(--dk-text-2);
}
.text-28px.white {
color: var(--dk-text);
}
.text-69px {
color: var(--dk-text);
}
.text-86px {
color: var(--dk-text);
}
.color-card {
background-color: var(--dk-surface-2);
}
.color.white {
background-color: var(--dk-surface);
}
.color.black {
background-color: var(--dk-bg);
}
.color.grey-color {
background-color: var(--dk-surface-2);
}
.color.grey-6 {
border: .5px solid var(--dk-line);
background-color: var(--dk-surface-2);
}
.color.grey-04 {
background-color: var(--dk-surface-2);
}
.color.bg-color {
background-color: var(--dk-bg-2);
}
.color.grey-05 {
background-color: var(--dk-surface-2);
}
.color.brand-color {
background-color: var(--dk-gold);
}
.color.bg-black {
background-color: var(--dk-surface-2);
}
.button-card {
background-color: var(--dk-surface-2);
}
.hire-me-button-wrap {
background-color: var(--dk-bg);
color: var(--dk-text);
}
.button-icon {
color: var(--dk-text);
}
.hire-me-icon {
color: var(--dk-text);
}
.video-button-wrap {
border: 1px solid var(--dk-line);
background-color: var(--dk-surface);
color: var(--dk-text);
}
.video-icon {
color: var(--dk-text);
}
.video-icon.is-relative {
color: var(--dk-text);
}
.video-icon.is-absolute {
color: var(--dk-text);
}
.video-text.is-relative {
color: var(--dk-text);
}
.video-text.is-absolute {
color: var(--dk-text);
}
.navbar {
border-bottom: 1px solid var(--dk-line);
}
.footer-section {
background-image: url("https://cdn.prod.website-files.com/68a9d12699bd47b077398cae/68a9d12699bd47b077398cb9_F%20BG.webp"), linear-gradient(360deg, rgba(30,0,56,0) 60%, var(--dk-surface));
}
.footer-social-media {
border: 1px solid var(--dk-line);
color: var(--dk-text-2);
}
.footer-social-media:hover {
color: var(--dk-text);
}
.contact-icon {
border: 1px solid var(--dk-line);
}
.footer-social-media-wrapper {
color: var(--dk-text-2);
}
.footer-copyright-wrapper {
border-color: var(--dk-line);
}
.footer-page-link {
color: var(--dk-text-2);
}
.footer-page-link:hover {
color: var(--dk-text);
}
.link, .link-2, .link-3 {
color: var(--dk-text-2);
}
.hero-social-media {
border: 1px solid var(--dk-line);
background-color: var(--dk-bg-2);
color: var(--dk-text);
}
.brand-right-shadow {
background-image: linear-gradient(90deg, rgba(30,0,56,0), var(--dk-bg-2) 70%);
}
.brand-left-shadow {
background-image: linear-gradient(90deg, var(--dk-bg-2), rgba(30,0,56,0) 70%);
}
.about-me-content-header {
color: var(--dk-text);
}
.about-me-content-header.about-me-inner-page {
color: var(--dk-text);
}
.about-me-content-wrapper {
background-color: var(--dk-surface-2);
}
.about-me-experience-wrapper {
background-color: var(--dk-bg-2);
}
.about-me-contact-icon {
border: 1px solid var(--dk-line);
}
.about-me-contact-icon.white {
border-color: var(--dk-line);
background-color: var(--dk-surface);
}
.number-count {
border-left: 1px solid var(--dk-line);
}
.number-count.inner-page {
background-color: var(--dk-bg-2);
}
.counter-text {
color: var(--dk-text);
}
.counter-text.black {
color: var(--dk-text);
}
.service-item {
border-bottom: .5px solid var(--dk-line);
}
.service-h3-heading.first {
color: var(--dk-text);
}
.srvice-list {
color: var(--dk-text-2);
}
.primary-button-2 {
color: var(--dk-text);
background-color: var(--dk-surface);
}
.why-choose-link {
border: 1px solid var(--dk-line);
}
.why-choose-link.w--current {
border: 1px solid var(--dk-line);
background-image: linear-gradient(rgba(203,163,88,.10), rgba(203,163,88,.10)), url("https://cdn.prod.website-files.com/68a9d12699bd47b077398cae/68a9d12699bd47b077398cda_Why%20Choose%20BG.webp");
}
.text-28px-why-choose {
color: var(--dk-text);
}
.philosophy-section {
background-color: var(--dk-bg-2);
}
.philosophy-section.extra-padding {
background-color: var(--dk-surface-2);
}
.text-shadow {
background-color: rgba(16,0,32,.72);
}
.black-text {
color: var(--dk-text);
}
.case-study-card {
border: 1px solid var(--dk-line);
}
.case-study-grid-card {
border-color: var(--dk-line);
}
.case-study-list {
color: var(--dk-text-2);
}
.case-study-second-card {
border: 1px solid var(--dk-line);
background-color: var(--dk-bg-2);
}
.case-study-second-card.third-card {
background-color: var(--dk-surface-2);
}
.skill {
border: 1px solid var(--dk-line);
color: var(--dk-text);
}
.skill:hover {
background-color: var(--dk-surface-2);
color: var(--dk-text);
}
.phone-holder-shadow {
background-color: rgba(10,0,20,.35);
}
.how-it-work-content {
border-left: 1px solid var(--dk-line);
}
.testimonial-section {
background-color: var(--dk-bg-2);
}
.testimonial-section.extra-padding {
background-color: rgba(255,255,255,.04);
}
.testimonial-ink {
border: 1px solid var(--dk-line);
}
.testimonial-ink.w--current {
border: 1px solid var(--dk-line);
}
.experience-accordion {
border: 1px solid var(--dk-line);
}
.my-creative-edge-card-wrapper {
background-color: var(--dk-surface);
}
.testimonial-card-wrapper {
background-color: var(--dk-surface);
box-shadow: 0 14px 32px rgba(0,0,0,.5);
}
.testimonial-client-name {
background-color: var(--dk-surface-2);
color: var(--dk-text);
}
.icon-license {
background-color: var(--dk-bg-2);
}
.license-paragrapg {
color: var(--dk-text-2);
}
.image-license {
background-color: var(--dk-bg-2);
}
.license-link {
color: var(--dk-text);
}
.image-heading {
color: var(--dk-text);
}
.license {
color: var(--dk-text);
}
.changelog-card {
background-color: var(--dk-bg-2);
}
.version-heading {
color: var(--dk-text);
}
.text-18px-2 {
color: var(--dk-text-3);
}
._404-text {
color: var(--dk-text-2);
}
.instruction-holder {
background-color: var(--dk-bg-2);
}
.instruction-card {
border-left: 1px solid var(--dk-line);
}
.avatar-group-item {
border: 1px solid var(--dk-line);
}
.client-holder {
border: 1px solid var(--dk-line);
background-color: var(--dk-surface-2);
}
.cta-wrapper {
background-image: linear-gradient(rgba(12,0,24,.85), rgba(12,0,24,.85)), url("https://cdn.prod.website-files.com/68a9d12699bd47b077398cae/68a9d12699bd47b077398d7a_BG.webp");
}
.text-24-px {
color: var(--dk-text);
}
.text-24-px.white {
color: var(--dk-text);
}
.cts-project-card {
border-left: 1px solid var(--dk-line);
}
.award-card-wrapper {
border-bottom: 1px solid var(--dk-line);
border-right-color: var(--dk-line);
border-left-color: var(--dk-line);
}
.award-card-wrapper:hover {
border-bottom-color: var(--dk-line);
}
.text-30px {
color: var(--dk-text);
}
.success-message {
background-color: var(--dk-surface);
}
.success-message.blog {
background-color: var(--dk-bg-2);
}
.form-input {
border: 1px solid var(--dk-line);
background-color: var(--dk-surface);
color: var(--dk-text-2);
}
.form-input:focus {
border-color: var(--dk-line);
color: var(--dk-text-2);
}
.form-input::placeholder {
color: var(--dk-text-2);
}
.form-button {
border: 1px solid var(--dk-line-2);
background-color: var(--dk-surface-2);
color: var(--dk-text);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.form-button:hover {
background-color: var(--dk-gold);
border-color: var(--dk-gold);
}
.form-button:focus {
background-color: var(--dk-gold);
box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 0 4px rgba(203,163,88,.22);
}
.form-button.is-button-small {
background-color: var(--dk-surface-2);
}
.error-message {
background-color: var(--dk-surface);
}
.error-message.blog {
background-color: var(--dk-bg-2);
}
.text-16px {
color: var(--dk-text-2);
}
.text-16px.white {
color: var(--dk-text);
}
.text-16px.grey {
color: var(--dk-text);
}
.text-16px.black {
color: var(--dk-text);
}
.text-16px.section-title {
color: var(--dk-text);
}
.text-16px.section-title.white {
color: var(--dk-text);
}
.hero-social-media-holder {
background-color: rgba(12,0,24,.72);
}
.blog-hero-section {
background-color: var(--dk-bg-2);
}
.single-page-link {
color: var(--dk-text-2);
}
.rich-text blockquote {
background-color: var(--dk-bg);
color: var(--dk-text);
}
.rich-text ul {
color: var(--dk-text-2);
}
.single-blog-category-wrapper {
border: 1px solid var(--dk-line);
color: var(--dk-text);
}
.single-blog-social-link {
border: 1px solid var(--dk-line);
color: var(--dk-text);
}
.single-blog-social-link:hover {
background-color: var(--dk-surface-2);
}
.input-field {
border: 1px solid var(--dk-line);
color: var(--dk-text-2);
}
.input-field:focus {
border-color: var(--dk-line);
}
.submit-button {
background-color: var(--dk-surface-2);
color: var(--dk-text);
}
.submit-button:hover {
background-color: var(--dk-bg);
}
.text-area {
border: 1px solid var(--dk-line);
color: var(--dk-text-2);
}
.text-area:focus {
border-color: var(--dk-line);
}
.single-work-client-card {
border-left: 1px solid var(--dk-line);
}
.work-tool {
border-left: 1px solid var(--dk-line);
}
.case-study-hero-section {
background-color: var(--dk-bg-2);
}
.case-study-detail-card {
border-left: 1px solid var(--dk-line);
}
.case-study-result-card {
background-color: var(--dk-bg-2);
border: .5px solid var(--dk-line);
}
.case-study-result-card:hover {
background-color: var(--dk-gold);
}
.section-page-hero {
background-color: var(--dk-bg-2);
}
.service-pricing-card {
border: 1px solid var(--dk-line);
}
.service-pricing-card.black {
background-color: var(--dk-surface-2);
}
.pricing-button-link {
background-color: var(--dk-surface-2);
color: var(--dk-text);
}
.pricing-button-link.white {
background-color: var(--dk-gold);
}
.pricing-cta-wrapper {
background-image: linear-gradient(rgba(16,0,32,.78), rgba(16,0,32,.78)), url("https://cdn.prod.website-files.com/68a9d12699bd47b077398cae/68ac6c630cff6c0478a50af2_e9dd7158af52d9dc0c6368a90864642881a9e168.webp");
}
.conatct-page-hero {
background-color: var(--dk-bg-2);
}
.contact-input {
background-color: var(--dk-surface);
color: var(--dk-text-2);
border: 1px solid var(--dk-line);
}
.contact-input:focus {
color: var(--dk-text-2);
border-color: var(--dk-line);
}
.contact-input::placeholder {
color: var(--dk-text-2);
}
.button-form {
background-color: var(--dk-surface-2);
color: var(--dk-text);
}
.button-form:hover, .button-form:focus {
background-color: var(--dk-bg);
}
.contact-form-wrapper {
background-color: var(--dk-surface);
}
.reach-out-inner-card {
background-color: var(--dk-bg-2);
}
.reach-out-inner-card:hover {
background-color: var(--dk-gold);
}
.reach-out-icon-wrapper {
border: 1px solid var(--dk-line);
}
.about-me-hero-section {
background-color: var(--dk-bg-2);
}
.about-me-experience-section {
background-color: var(--dk-surface-2);
}
.brand-card {
border: 1px solid var(--dk-line);
}
.hero-image-wrapper {
background-color: var(--dk-surface);
box-shadow: 0 20px 34px rgba(0,0,0,.5);
}
.hero-social {
border: 1px solid var(--dk-line);
background-color: rgba(12,0,24,.6);
}
.hero-icon {
color: var(--dk-text);
}
.client-big-text {
color: var(--dk-text);
}
.text-20-px {
color: var(--dk-text);
}
.text-20-px.grey-01 {
color: var(--dk-text-2);
}
.red-dot {
background-color: var(--dk-gold);
}
.nav-link {
color: var(--dk-text-2);
}
.nav-link:hover {
color: var(--dk-text);
}
.nav-link.w--current {
color: var(--dk-text);
}
.hero-button {
background-color: var(--dk-surface-2);
color: var(--dk-text);
}
.hero-button-arrow-wrapper {
background-color: var(--dk-gold);
}
.hero-button-text.is-relative {
color: var(--dk-text);
}
.about-me-content-text.white {
color: var(--dk-text);
}
.about-me-content-text.center.left {
color: var(--dk-text);
}
.text-3 {
color: var(--dk-text);
}
.service-black-card-wrapper {
background-color: var(--dk-surface-2);
}
.best-price {
background-color: var(--dk-surface);
}
.ptimary-button-bg {
background-color: var(--dk-gold);
}
.primary-arrow.is-relative {
color: var(--dk-text);
}
.primary-arrow.is-absolute {
color: var(--dk-text);
}
.secondary-button-arrow-wrapper {
background-color: var(--dk-surface-2);
}
.secondry-button {
background-color: var(--dk-gold);
color: var(--dk-on-gold);
}
.secondry-button.tablet {
background-color: var(--dk-gold);
}
.secondary-button-bg {
background-color: var(--dk-surface-2);
}
.secondary-arrow.is-relative {
color: var(--dk-text);
}
.secondary-arrow.is-absolute {
color: var(--dk-text);
}
.secondary-button-text.is-relative {
color: var(--dk-text);
}
.secondary-button-text.is-absolute {
color: var(--dk-text);
}
.project-button {
background-color: var(--dk-surface-2);
}
.text-40px {
color: var(--dk-text);
}
.text-40px.white {
color: var(--dk-text);
}
.text-40px.grey-02 {
color: var(--dk-text-2);
}
.hero-right-text-wrapper {
border-left: 1px solid var(--dk-line);
}
.grey-04 {
color: var(--dk-text-3);
}
.award-overlay {
background-color: var(--dk-gold);
}
.case-study-overlay {
background-color: rgba(12,0,24,.55);
}
.cta-button {
background-color: var(--dk-gold);
color: var(--dk-on-gold);
}
.cta-button-bg {
background-color: var(--dk-surface);
}
.cta-button-text.is-relative {
color: var(--dk-text);
}
.cta-button-text.is-absolute {
color: var(--dk-text);
}
.cta-button-arrow-wrapper {
background-color: var(--dk-surface-2);
}
.cta-arrow.is-relative {
color: var(--dk-text);
}
.cta-arrow.is-absolute {
color: var(--dk-text);
}
.about-me-timeline-section {
color: var(--dk-text);
background-color: var(--dk-bg-2);
}
.dotted-line {
border: 1px solid var(--dk-line);
}
.advertise-icon-wrapper {
color: var(--dk-text);
border: 1px solid var(--dk-line);
}
.advertise-icon-wrapper.icon-two {
background-color: var(--dk-surface-2);
border-color: var(--dk-line);
}
.advertise-icon-wrapper.icon-one {
border-color: var(--dk-line);
}
.work-process-small-circle {
background-color: var(--dk-surface-2);
color: var(--dk-text);
}
.teanding {
color: var(--dk-text);
}
.blog-button {
background-color: var(--dk-surface-2);
}
.blog-overlay {
background-color: rgba(12,0,24,.55);
}
.case-study-button {
background-color: var(--dk-surface-2);
}
.recent-case-study-white-heading, .case-study-subheading {
color: var(--dk-text);
}
.breadcum-card {
border: 1px solid var(--dk-line);
}
.breadcum-home {
color: var(--dk-text-2);
}
.breadcum-home:hover {
color: var(--dk-text);
}
.breadcum-home.w--current {
color: var(--dk-text-2);
}
.breadcum-page {
color: var(--dk-text);
}
.breadcum-page.w--current {
color: var(--dk-text-2);
}
.accordion-icon-vertical-line {
background-color: var(--dk-surface-2);
}
.faq-accordion {
border-bottom: 1px solid var(--dk-line);
}
.accordion-icon-horizontal-line {
background-color: var(--dk-surface-2);
}
.accordion-icon-component {
border: 1px solid var(--dk-line);
}
.faq-icon-wrapper {
color: var(--dk-text);
}
.small-section-wrapper {
border: 1px solid var(--dk-line);
}
.small-section-buttlet-point {
background-color: var(--dk-surface-2);
}
.small-section-buttlet-point.white {
background-color: var(--dk-surface);
}
.breadcum-icon.is-relative {
color: var(--dk-text);
}
.breadcum-icon.is-absolute {
color: var(--dk-text);
}
.service-skill {
border: 1px solid var(--dk-line);
}
.service-process-caed {
border-bottom: 1px solid var(--dk-line);
}
.left-arrow-4 {
border: 1px solid var(--dk-line);
}
.right-arrow-4 {
border: 1px solid var(--dk-line);
}
.home-blog-button {
background-color: var(--dk-surface-2);
}
.counter-number {
color: var(--dk-text);
}
.counter-number.home-counter {
color: var(--dk-text);
}
.counter-number.home-counter.black {
color: var(--dk-text);
}
.about-me-description-heading.white {
color: var(--dk-text);
}
.black-button {
background-color: var(--dk-surface-2);
color: var(--dk-text);
}
.black-button-text.is-relative {
color: var(--dk-text);
}
.black-button-text.is-absolute {
color: var(--dk-text);
}
.black-button-arrow.is-relative {
color: var(--dk-text);
}
.black-button-arrow.is-absolute {
color: var(--dk-text);
}
.black-button-white-arrow-wrapper {
background-color: var(--dk-surface);
}
.white-button {
background-color: var(--dk-surface);
color: var(--dk-text);
}
.white-button-text.is-relative {
color: var(--dk-text);
}
.white-button-text.is-absolute {
color: var(--dk-text);
}
.white-botton-arrow-wrapper {
background-color: var(--dk-surface-2);
}
.checkout-hero-section {
background-color: var(--dk-bg-2);
}
.order-wrapper {
background-color: var(--dk-bg-2);
}
.contact-form-input {
border: 1px solid var(--dk-line);
background-color: var(--dk-surface);
color: var(--dk-text-2);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.contact-form-input::placeholder {
color: var(--dk-text-2);
}
.checked-item.w--redirected-checked {
border: 1px solid var(--dk-line);
background-image: linear-gradient(to bottom, var(--dk-bg-2), var(--dk-bg-2));
}
.checkbox-field {
border: 1px solid var(--dk-line);
}
.contact-form-button {
background-color: var(--dk-bg);
color: var(--dk-text);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.contact-form-button:hover, .contact-form-button:focus, .contact-form-button:focus-visible, .contact-form-button[data-wf-focus-visible] {
background-color: var(--dk-bg);
}
.pricing-service-card {
background-color: var(--dk-bg-2);
}
.about-me-contact-icon-updated {
background-color: var(--dk-gold);
}
.about-me-call-title {
color: var(--dk-text);
}
.about-me-call-title.black {
color: var(--dk-text);
}
.about-me-call-title.semi-bold {
color: var(--dk-text);
}
.about-me-call-title.grey-02 {
color: var(--dk-text-2);
}
.about-me-call-title.white {
color: var(--dk-text);
}
.about-me-call-title.grey {
color: var(--dk-text);
}
.about-me-call-title.grey-04 {
color: var(--dk-text-3);
}
.about-me-call-subtitle {
color: var(--dk-text-3);
}
.about-me-call-subtitle.black {
color: var(--dk-text);
}
.about-me-call-subtitle.semi-bold {
color: var(--dk-text);
}
.about-me-call-subtitle.grey-02 {
color: var(--dk-text-2);
}
.about-me-call-subtitle.white {
color: var(--dk-text);
}
.about-me-call-subtitle.grey {
color: var(--dk-text);
}
.about-me-call-subtitle.grey-04 {
color: var(--dk-text-3);
}
@media screen and (max-width: 991px) {
.nav-menu {
background-color: var(--dk-surface);
}
.nav-menu.tablet {
background-color: var(--dk-surface);
background-color: var(--dk-surface-2);
}
.menu-button.w--open {
color: var(--dk-text);
}
.footer-section {
background-image: linear-gradient(360deg, rgba(30,0,56,0) 60%, var(--dk-surface)), url("https://cdn.prod.website-files.com/68a9d12699bd47b077398cae/68a9d12699bd47b077398cb9_F%20BG.webp");
}
.award-card-wrapper {
border-top-color: var(--dk-line);
}
.lottie-animation-2 {
color: var(--dk-text);
}
.nav-link {
color: var(--dk-text-2);
}
.nav-link:hover, .nav-link.w--current {
color: var(--dk-text);
}
.faq-accordion {
border-bottom: 1px solid var(--dk-line);
}
}
@media screen and (max-width: 767px) {
.nav-menu.tablet {
background-color: var(--dk-surface);
background-color: var(--dk-surface-2);
}
.form-button:hover {
background-color: var(--dk-gold);
border-color: var(--dk-gold);
}
.form-button.is-button-small:hover {
background-color: var(--dk-bg);
}
.button-form:hover {
background-color: var(--dk-bg);
}
}
@media screen and (max-width: 479px) {
.service-item {
background-color: var(--dk-surface);
}
.hero-mobile-shadow.hide-desktop {
background-image: linear-gradient(360deg, rgba(10,0,20,.88), rgba(30,0,56,0) 96%);
}
}
/* ==========================================================================
3. Hand-tuned layer — contrast, depth and accent placement
========================================================================== */
/* Let the root aurora show through the page. --------------------------------- */
body,
body.body,
body.style-guide {
background-color: transparent;
}
/* --------------------------------------------------------------------------
Navigation
-------------------------------------------------------------------------- */
/* Apple-style frosted glass: lighter tint, heavier blur/saturation than a
flat translucent bar, a hairline gold edge, and a soft inner top highlight
plus outer shadow so the bar reads as a pane of glass floating over the
page rather than a solid strip. */
.navbar {
border-bottom: 1px solid rgba(203, 163, 88, .22);
background-color: rgba(30, 8, 56, .46);
-webkit-backdrop-filter: blur(28px) saturate(180%);
backdrop-filter: blur(28px) saturate(180%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .07),
0 8px 32px rgba(0, 0, 0, .28);
}
.navbar-wrapper {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* --------------------------------------------------------------------------
Entrance — logo slides in with a fade from the left, the button from the
right, on the same timing so they land together.
-------------------------------------------------------------------------- */
@keyframes ksv-nav-in-left {
from { opacity: 0; transform: translateX(-28px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes ksv-nav-in-right {
from { opacity: 0; transform: translateX(28px); }
to { opacity: 1; transform: translateX(0); }
}
.navbar-brand {
animation: ksv-nav-in-left .9s cubic-bezier(.22, 1, .36, 1) both;
animation-delay: .15s;
}
.ksv-nav-connect {
animation: ksv-nav-in-right .9s cubic-bezier(.22, 1, .36, 1) both;
animation-delay: .15s;
}
/* Header has no wrap (logo left, button right, space-between, both fixed
size) — on narrow phones the full "Book an Appointment" button no longer
fits beside the logo and pushes past the right edge of the screen,
forcing the whole page into a horizontally-scrollable, zoomed-out layout.
Shrinking just the label text on small screens reclaims enough width. */
@media screen and (max-width: 479px) {
.ksv-nav-connect .cta-button-text {
font-size: 13px;
}
.ksv-nav-connect {
padding-left: 12px;
}
}
.navbar-brand {
padding: 8px 0;
}
.nav-link {
color: var(--dk-text-2);
}
.nav-link:hover,
.nav-link.w--current {
color: var(--dk-gold);
}
.nav-menu,
.nav-menu.tablet {
background-color: transparent;
}
@media screen and (max-width: 991px) {
.nav-menu,
.nav-menu.tablet {
background-color: var(--dk-surface);
border: 1px solid var(--dk-line);
box-shadow: var(--dk-shadow);
}
}
/* --------------------------------------------------------------------------
Buttons — the template layers two text runs and a sliding fill per button.
Rest state and hover state need opposite ink, so they are set explicitly.
-------------------------------------------------------------------------- */
/* Gold fill at rest → violet ink at rest, light ink once the violet slides in */
.cta-button,
.secondry-button,
.secondry-button.tablet,
.secondry-button.desktop {
background-color: var(--dk-gold);
color: var(--dk-on-gold);
}
.cta-button-text.is-absolute,
.secondary-button-text.is-absolute {
color: var(--dk-on-gold);
}
.cta-button-text.is-relative,
.secondary-button-text.is-relative {
color: var(--dk-text);
}
.cta-button-bg,
.secondary-button-bg {
background-color: var(--dk-bg-2);
}
.cta-button-arrow-wrapper,
.secondary-button-arrow-wrapper,
.white-botton-arrow-wrapper {
background-color: var(--dk-on-gold);
color: var(--dk-gold);
}
/* Violet fill at rest → light ink at rest, violet ink once the gold slides in */
.hero-button {
background-color: var(--dk-surface-2);
color: var(--dk-text);
border: 1px solid var(--dk-line);
}
.hero-button-text.is-absolute {
color: var(--dk-text);
}
.hero-button-text.is-relative {
color: var(--dk-on-gold);
}
.ptimary-button-bg,
.award-overlay {
background-color: var(--dk-gold);
}
.hero-button-arrow-wrapper,
.black-button-white-arrow-wrapper {
background-color: var(--dk-gold);
color: var(--dk-on-gold);
}
/* Solid violet buttons */
.form-button,
.button-form,
.submit-button,
.form-button.is-button-small {
background-color: var(--dk-gold);
border-color: var(--dk-gold);
color: var(--dk-on-gold);
box-shadow: 0 10px 26px rgba(203, 163, 88, .18);
}
.form-button:hover,
.button-form:hover,
.submit-button:hover,
.form-button.is-button-small:hover {
background-color: var(--dk-gold-2);
border-color: var(--dk-gold-2);
color: var(--dk-on-gold);
}
.primary-button-2 {
background-color: var(--dk-gold);
color: var(--dk-on-gold);
}
.pricing-button-link {
background-color: var(--dk-surface-2);
color: var(--dk-text);
border: 1px solid var(--dk-line);
}
.pricing-button-link.white {
background-color: var(--dk-gold);
border-color: var(--dk-gold);
}
.pricing-button-link.white .white-button-text,
.pricing-button-link.white .pricing-button-text {
color: var(--dk-on-gold);
}
/* Round media buttons that sit on top of imagery */
.blog-button,
.home-blog-button,
.project-button {
background-color: rgba(30, 0, 56, .55);
border: 1px solid var(--dk-line-2);
color: var(--dk-text);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
/* --------------------------------------------------------------------------
Cards & surfaces — a hairline plus depth so panels read as raised
-------------------------------------------------------------------------- */
.case-study-result-card,
.service-item,
.faq-accordion,
.award-card-wrapper,
.reach-out-inner-card,
.pricing-card,
.blog-card,
.testimonial-card {
border-color: var(--dk-line);
}
.case-study-result-card:hover,
.reach-out-inner-card:hover {
background-color: var(--dk-gold-soft);
border-color: var(--dk-line-2);
}
/* Accent dots and swatches stay solid gold */
.red-dot,
.color.brand-color {
background-color: var(--dk-gold);
}
/* --------------------------------------------------------------------------
Typography accents
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.heading-style-h1, .heading-style-h2, .heading-style-h3 {
color: var(--dk-text);
}
a {
color: inherit;
}
.text-link,
.blog-link,
.footer-link:hover {
color: var(--dk-gold);
}
blockquote {
border-left-color: var(--dk-gold);
color: var(--dk-text);
}
hr,
.divider,
.line {
border-color: var(--dk-line);
background-color: var(--dk-line-solid);
}
.dotted-line,
.advertise-icon-wrapper,
.accordion-icon-component {
border-color: var(--dk-line-2);
color: var(--dk-gold);
}
.advertise-icon-wrapper.icon-two {
background-color: var(--dk-gold);
border-color: var(--dk-gold);
color: var(--dk-on-gold);
}
.accordion-icon-vertical-line,
.accordion-icon-horizontal-line {
background-color: var(--dk-gold);
}
/* --------------------------------------------------------------------------
Forms
-------------------------------------------------------------------------- */
.contact-input,
.input-field,
.text-area,
.w-input,
.w-select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
background-color: rgba(255, 255, 255, .035);
border: 1px solid var(--dk-line);
color: var(--dk-text);
}
.contact-input:focus,
.input-field:focus,
.text-area:focus,
.w-input:focus,
.w-select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus {
border-color: var(--dk-gold);
box-shadow: 0 0 0 3px rgba(203, 163, 88, .16);
color: var(--dk-text);
outline: none;
}
::placeholder {
color: var(--dk-text-3);
opacity: 1;
}
select option {
background-color: var(--dk-surface);
color: var(--dk-text);
}
/* Chrome autofill repaint */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
-webkit-text-fill-color: var(--dk-text);
-webkit-box-shadow: 0 0 0 1000px var(--dk-surface) inset;
caret-color: var(--dk-text);
}
.w-form-done {
background-color: var(--dk-gold-soft);
border: 1px solid var(--dk-line-2);
color: var(--dk-text);
}
.w-form-fail {
background-color: rgba(234, 56, 76, .14);
border: 1px solid rgba(234, 56, 76, .35);
color: #ffb3bc;
}
/* --------------------------------------------------------------------------
Focus visibility (keyboard users) — gold ring on a dark ground
-------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--dk-gold);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
Media — photography needs a touch less glare against a dark ground
-------------------------------------------------------------------------- */
img {
color: var(--dk-text-3);
}
.w-lightbox-backdrop {
background: rgba(10, 0, 20, .94);
}
/* --------------------------------------------------------------------------
Webflow Interactions repaint these backgrounds inline at runtime from the
site's IX2 data, so the theme has to outrank the inline style.
-------------------------------------------------------------------------- */
.cta-button,
.secondry-button,
.secondry-button.tablet,
.secondry-button.desktop,
.hero-button-arrow-wrapper,
.black-button-white-arrow-wrapper,
.ptimary-button-bg,
.award-overlay {
background-color: var(--dk-gold) !important;
}
.hero-button,
.cta-button-arrow-wrapper,
.secondary-button-arrow-wrapper,
.white-botton-arrow-wrapper,
.cta-button-bg,
.secondary-button-bg {
background-color: var(--dk-on-gold) !important;
}
.cta-button-arrow-wrapper,
.secondary-button-arrow-wrapper,
.white-botton-arrow-wrapper {
color: var(--dk-gold);
}
.hero-button-arrow-wrapper,
.black-button-white-arrow-wrapper {
color: var(--dk-on-gold);
}
.blog-button,
.home-blog-button,
.project-button {
background-color: rgba(30, 0, 56, .55) !important;
}
.faq-accordion,
.text-18px {
background-color: transparent !important;
}
/* The "how it works" timeline dots animate between white and grey as the
section scrolls; both ends need to read on violet. */
.advertise-icon-wrapper.icon-one,
.advertise-icon-wrapper.icon-two,
.advertise-icon-wrapper.icon-three,
.advertise-icon-wrapper.icon-four {
background-color: var(--dk-surface-2) !important;
border-color: var(--dk-line-2) !important;
color: var(--dk-gold) !important;
}
/* Sticky service headings are repainted black by the scroll interaction. */
.service-h3-heading,
.service-h3-heading.first,
.service-h3-heading.second,
.service-h3-heading.third,
.service-h3-heading.fourth {
color: var(--dk-text) !important;
-webkit-text-fill-color: var(--dk-text) !important;
}
/* --------------------------------------------------------------------------
Decorative background photography — several sections ship a near-white
backdrop plate. Multiplying them through a violet keeps the texture while
dropping them behind the type, and needs no knowledge of the image URLs.
-------------------------------------------------------------------------- */
.footer-section,
.testimonial-section,
.testimonial-section.extra-padding,
.why-choose-link,
.why-choose-link.w--current {
background-color: #1d0636;
background-blend-mode: multiply;
}
/* --------------------------------------------------------------------------
Depth — the template's dark panels were flat greys. A one-stop gradient and
a hairline keep them from reading as slabs of paint.
-------------------------------------------------------------------------- */
.about-me-content-wrapper,
.about-me-experience-section,
.philosophy-section.extra-padding,
.service-black-card-wrapper,
.service-pricing-card.black,
.case-study-second-card.third-card {
background-image: linear-gradient(160deg, rgba(203, 163, 88, .07), rgba(0, 0, 0, .18) 62%);
}
.service-pricing-card.black,
.case-study-second-card.third-card,
.philosophy-section.extra-padding {
border: 1px solid var(--dk-line);
box-shadow: var(--dk-shadow);
}
/* The mobile menu button is a Lottie whose paths carry a baked-in #333 fill.
CSS beats the presentation attribute, so the burger simply repaints. */
.lottie-animation-2 path,
.menu-button [data-animation-type="lottie"] path {
fill: var(--dk-text);
stroke: none;
}
/* Anything filled gold carries violet ink, icons included. */
.about-me-contact-icon-updated,
.pricing-button-link.white,
.w-button,
.w-checkbox-input--inputType-custom.w--redirected-checked,
.color.brand-color {
color: var(--dk-on-gold);
}
.pricing-button-link.white .pricing-button-text,
.pricing-button-link.white .white-button-text {
color: var(--dk-on-gold);
}
/* --------------------------------------------------------------------------
Logotypes ship as dark artwork on transparency — invert them for the dark
ground rather than sitting them on a white plate. KSV logo is gold & purple
so it doesn't need inverting.
-------------------------------------------------------------------------- */
/* The Webflow nav shell hard-caps itself at max-height:77px, sized for the
old, much shorter stock logo. With a taller logo that cap doesn't grow
with its content (overflow stays visible instead of clipping), so the
logo simply spilled out past the header's own background/border — never
actually mis-positioned, just taller than the box drawn behind it. Letting
the shell grow restores real vertical centering (its own 12px/12px
top/bottom padding is already symmetric) and fixes mobile the same way. */
.navbar-no-shadow-container-2 {
max-height: none !important;
}
.navbar-brand,
.navbar-brand.w--current {
display: inline-flex !important;
align-items: center;
height: auto !important;
max-height: none !important;
min-height: 128px;
max-width: none !important;
overflow: visible !important;
}
.navbar-brand img[src*="ksv-logo"] {
filter: none;
width: 192px !important;
height: 128px !important;
object-fit: contain;
}
@media screen and (max-width: 479px) {
.navbar-brand,
.navbar-brand.w--current {
min-height: 88px;
}
.navbar-brand img[src*="ksv-logo"] {
width: 132px !important;
height: 88px !important;
}
}
.navbar-brand .image,
.navbar-brand img:not([src*="ksv-logo"]),
.footer-brand img,
.footer-logo img {
filter: brightness(0) invert(1);
}
.why-choose-icon {
filter: brightness(0) invert(1);
opacity: .58;
transition: opacity .3s ease;
}
.why-choose-icon:hover {
opacity: 1;
}
/* --------------------------------------------------------------------------
Client marquee — real, full-colour client logos read best on a bright
plate rather than the dark ground, so this section gets its own white
card. A seamless CSS-driven scroll (two copies of the same run, shifted
by exactly one copy-width) replaces the old IX2-driven strip.
-------------------------------------------------------------------------- */
.client-marquee-card {
width: 100%;
min-width: 0;
max-width: 1200px;
margin: 0 auto;
/* Pure white, not a tint: the client logos are PNGs with their own white
backgrounds baked in, so anything off-white makes each logo read as a
visible rectangle sitting on the card. */
background: #fff;
border-radius: 24px;
padding: 52px 0;
box-shadow:
0 30px 70px rgba(20, 0, 38, .35),
0 1px 0 rgba(255, 255, 255, .6) inset;
border: 1px solid rgba(203, 163, 88, .25);
}
.client-marquee-viewport {
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.client-marquee-track {
display: flex;
align-items: center;
width: max-content;
gap: 72px;
padding-right: 72px;
animation: client-marquee-scroll 32s linear infinite;
}
@keyframes client-marquee-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
.client-logo-item {
flex: none;
display: flex;
align-items: center;
justify-content: center;
height: 130px;
min-width: 170px;
}
/* Logos stay in their real colours at all times — no desaturation, no
hover treatment. The strip just scrolls. */
.client-logo-item img {
height: 100%;
width: auto;
max-width: 250px;
object-fit: contain;
}
@media screen and (max-width: 767px) {
.client-marquee-card {
border-radius: 18px;
padding: 36px 0;
}
.client-marquee-track {
gap: 52px;
padding-right: 52px;
}
.client-logo-item {
height: 92px;
min-width: 130px;
}
.client-logo-item img {
max-width: 170px;
}
}
/* --------------------------------------------------------------------------
Header — logo on the left, a single "Let's Connect" button on the right.
No nav menu, no hamburger, identical layout on mobile and desktop.
-------------------------------------------------------------------------- */
.menu-button,
.w-nav-button,
.nav-menu-wrapper {
display: none !important;
}
.navbar-wrapper {
justify-content: space-between !important;
}
/* ==========================================================================
Intro preloader — full black screen, plays the KSV intro video once
(start to finish, muted so autoplay is guaranteed across browsers), then
slides up to reveal the site. Homepage only.
========================================================================== */
html.ksv-preloading,
html.ksv-preloading body {
overflow: hidden;
height: 100%;
}
#ksv-preloader {
position: fixed;
inset: 0;
z-index: 100000;
background: #000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: transform 0.9s cubic-bezier(.65, 0, .35, 1);
will-change: transform;
}
#ksv-preloader.ksv-preloader-out {
transform: translateY(-100%);
}
.ksv-preloader-video-wrap {
width: min(90vw, 960px);
aspect-ratio: 16 / 9;
overflow: hidden;
}
#ksv-preloader-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #000;
}
/* 16:9 letterboxes badly on tall narrow screens, so the frame is scaled up
a little here and cropped (overflow:hidden on the parent, above) instead
of shrinking it down small with big black bars — keeps the logo/content
in the video legible on a phone. */
@media screen and (max-width: 767px) {
.ksv-preloader-video-wrap {
width: 100vw;
transform: scale(1.45);
}
}
/* ==========================================================================
Hero photo flip-reveal — after the preloader finishes and the site is
visible, the hero image briefly shows a "Co-Founder / Planets Development"
card, then flips (3D rotateY) to reveal the real portrait. LinkedIn and
Instagram icons fade in once the flip completes.
========================================================================== */
.hero-flip-card {
position: relative;
width: 100%;
height: 100%;
perspective: 1600px;
}
.hero-flip-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s cubic-bezier(.65, 0, .35, 1);
transform-style: preserve-3d;
}
.hero-flip-inner.is-flipped {
transform: rotateY(180deg);
}
.hero-flip-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.hero-flip-front {
transform: rotateY(0deg);
}
.hero-flip-back {
transform: rotateY(180deg);
}
.hero-flip-face .hero-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Icons start hidden and fade in once the flip finishes, rather than sitting
over a card face that hasn't revealed her yet. */
#ksv-hero-social-icons {
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
}
#ksv-hero-social-icons.is-visible {
opacity: 1;
pointer-events: auto;
}
/* The base theme moves this to the bottom, centered, on small phones — kept
at the top-right on every breakpoint instead, per request. */
@media screen and (max-width: 479px) {
.hero-social-icon-wrapper {
flex-flow: column !important;
justify-content: flex-start !important;
align-items: flex-end !important;
inset: 30px 22px auto auto !important;
}
}
/* Fix: nested divs (flip-card faces) have no intrinsic size the way a bare
![]()
did, so height:100% down the chain resolved to 0. An explicit
aspect-ratio matching the photos (914:1280) gives the holder real height
without needing a percentage to resolve against. */
.hero-image-holder {
aspect-ratio: 914 / 1280;
}
/* This wrapper's Webflow fade-in was wired to a data-w-id on the original
plain ![]()
, which the flip-card markup no longer carries — so it never
fires and the whole hero photo stayed invisible. Not relying on that
IX2 timing at all here. */
.hero-image-wrapper {
opacity: 1 !important;
}
/* ==========================================================================
Skills section — replacing the fragile scroll-driven accordion
--------------------------------------------------------------------------
The base theme runs this as a 400vh scroll-linked accordion (position:
sticky wrapper, position:sticky main wrapper, headings that scale up and
force nowrap, content collapsed to height:0 until an IX2 interaction
expands it). With this page's longer skill titles ("PREMIUM WEBSITE
DEVELOPMENT" etc.) and the JS-driven reveal not reliably running here,
that produced cut-off headings and content with no real spacing. Replaced
with a plain, always-visible, properly spaced card layout that behaves
identically on every device.
========================================================================== */
.service-section {
height: auto !important;
overflow: visible !important;
}
.service-main-wrapper {
position: static !important;
top: auto !important;
height: auto !important;
}
.service-item {
padding: 36px 0 !important;
border-bottom: 1px solid var(--dk-line);
}
.service-item:last-child {
border-bottom: none;
}
.service-heading-top {
padding: 0 !important;
}
.service-heading-left {
width: 100% !important;
padding: 0 0 20px !important;
}
.service-h3-heading,
.service-h3-heading.first,
.service-h3-heading.second,
.service-h3-heading.third,
.service-h3-heading.fourth {
white-space: normal !important;
transform: none !important;
word-break: break-word;
}
.service-heading-main-bottom-wrapper,
.service-heading-main-bottom-wrapper.first,
.service-heading-main-bottom-wrapper.second,
.service-heading-main-bottom-wrapper.third,
.service-heading-main-bottom-wrapper.fourth {
height: auto !important;
overflow: visible !important;
}
.dervice-bottom {
flex-flow: column !important;
gap: 28px;
padding: 0 !important;
margin-top: 16px !important;
overflow: visible !important;
}
.bottom-left-part {
max-width: none !important;
padding: 0 !important;
}
.service-image {
width: 100%;
max-width: 100% !important;
min-height: 0 !important;
height: auto;
max-height: none !important;
/* The 4 skill images are all real 1:1 squares (627x627) — match that
instead of forcing a wider ratio, which was cropping their content. */
aspect-ratio: 1 / 1;
object-fit: contain;
border-radius: 20px !important;
margin: 0 !important;
display: block;
box-shadow: var(--dk-shadow);
}
@media screen and (min-width: 768px) {
.dervice-bottom {
flex-flow: row !important;
align-items: center !important;
gap: 48px;
}
.bottom-left-part {
flex: 1 1 44%;
max-width: 44% !important;
}
.service-image {
/* A definite width (not width:auto) so the flex item + aspect-ratio
system has something concrete to size against — auto collapsed it
to 0. Capped in pixels, not just column %, so on wide screens it
doesn't grow to fill the whole available height. */
flex: 0 0 min(50%, 360px);
width: min(50%, 360px) !important;
max-width: min(50%, 360px) !important;
}
}
/* ==========================================================================
Sticky compact header — appears once the visitor scrolls past the main
header, so the brand stays reachable without the full-size logo taking
up room. Text-only (no logo), fades in/out rather than snapping.
========================================================================== */
#ksv-sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20, 0, 38, .62);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
border-bottom: 1px solid rgba(203, 163, 88, .28);
box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
opacity: 0;
transform: translateY(-100%);
transition: opacity .5s ease, transform .5s ease;
pointer-events: none;
text-decoration: none;
}
#ksv-sticky-header.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#ksv-sticky-header .ksv-sticky-text {
font-family: "Times New Roman", Times, Georgia, serif;
font-weight: 700;
color: var(--dk-gold);
letter-spacing: 3.5px;
font-size: 26px;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}
@media screen and (max-width: 479px) {
#ksv-sticky-header {
height: 52px;
}
#ksv-sticky-header .ksv-sticky-text {
font-size: 16px;
letter-spacing: 1.8px;
}
}
@media screen and (min-width: 480px) and (max-width: 767px) {
#ksv-sticky-header .ksv-sticky-text {
font-size: 19px;
letter-spacing: 2.4px;
}
}
/* The Apple-glass treatment above (.navbar) already applies identically on
mobile and desktop, so no separate mobile override is needed here. */
/* "Co-Founder / Planets Development" text — left-aligned on desktop only
(the base theme right-aligns it there; mobile already centers it via its
own breakpoint rules, left untouched). */
@media screen and (min-width: 992px) {
.hero-skill-wrapper {
align-items: flex-start !important;
}
}
/* ==========================================================================
About-me work carousel — replaces the Webflow slider (which needs its own
runtime JS to move one slide at a time; here it was rendering every slide
at once instead) with a simple, dependency-free crossfade between the two
real project screenshots.
========================================================================== */
.ksv-work-carousel {
position: relative;
width: 100%;
max-width: 340px;
aspect-ratio: 1038 / 1516;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--dk-shadow);
border: 1px solid var(--dk-line);
}
.ksv-work-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease;
}
.ksv-work-slide.is-active {
opacity: 1;
}
@media screen and (max-width: 767px) {
.ksv-work-carousel {
max-width: 280px;
margin: 0 auto;
}
}
/* ==========================================================================
CTA stat blocks — the outer grid defaulted to 1fr/1fr columns, so with
.cta-details-text capped at max-width:400px it sat alone in an oversized
column, leaving a big gap before 02/03. Columns now shrink to their
content so all three sit evenly spaced instead.
Desktop only (min-width: 992px) — the base theme already switches this
grid to a single stacked column at 991px and below. Without this guard
the max-content columns don't shrink for a narrow viewport (max-content
is the content's natural unwrapped width, not a shrink-to-fit value), so
the grid forced itself wider than the screen and the whole page was
pushed into a horizontally-scrollable, zoomed-out layout on mobile.
========================================================================== */
@media screen and (min-width: 992px) {
.cta-details-grid {
grid-template-columns: max-content max-content !important;
justify-content: start;
align-items: start;
}
.cta-details-text {
max-width: none;
}
}
/* Small inner margin on mobile so the heading/image don't sit flush against
the screen edges — each skill item should read as its own card with a
little breathing room, not text touching the container boundary. */
@media screen and (max-width: 767px) {
.service-item {
padding: 36px 18px !important;
}
}
/* Recent-work cards: name+description and category share one row via flex
at every size. On mobile the card narrows enough that the two columns
collide (category text crammed beside a wrapping title). Stack them
instead so each reads cleanly full-width. */
@media screen and (max-width: 767px) {
.recent-work-content-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.work-project-wrapper {
max-width: 100%;
}
}