/* ======================================================================= SAFEIFY — COMPLETE POSITIONING CONTROL FOR PROJECTS / PRIVAI PAGE FILE: positioning-projects.css ======================================================================= PURPOSE ------- This file is the desktop control panel for projects.html. Use the variables in :root to freely adjust: - Header - Hero text and buttons - PrivAI section heading - Embedded PrivAI demo window - Demo top bar and iframe - Four feature cards and their internal content - Privacy-flow heading and three flow cards - Development notice - Footer LOAD ORDER ---------- 1. global.css 2. projects.css 3. responsive.css 4. positioning-projects.css <-- KEEP THIS LAST DESKTOP ONLY ------------ These manual controls are applied only when the screen is wider than 900px. Tablet/mobile remain controlled by the normal responsive styles. POSITION RULES -------------- X positive = move right X negative = move left Y positive = move down Y negative = move up Scale: 1.00 = normal 1.10 = 10% larger 0.90 = 10% smaller ======================================================================= */ :root { /* ========================================================= PAGE BACKGROUND ========================================================= */ --projects-background-size: cover; --projects-background-position-x: 50%; --projects-background-position-y: 50%; /* ========================================================= COMPLETE HEADER CONTAINER ========================================================= */ --projects-header-container-width: 1800px; --projects-header-container-x: 0px; --projects-header-container-y: 0px; --projects-header-edge-space: clamp(20px, 3vw, 70px); /* ========================================================= HEADER LOGO + BRAND ========================================================= */ --projects-header-logo-x: -330px; --projects-header-logo-y: 0px; --projects-logo-size: 42px; --projects-brand-text-size: 16px; /* ========================================================= HEADER NAVIGATION ========================================================= */ --projects-header-nav-x: 20px; --projects-header-nav-y: 0px; --projects-nav-font-size: 18px; --projects-nav-padding-y: 14px; --projects-nav-padding-x: 8px; --projects-nav-gap: 30px; /* ========================================================= HEADER CTA ========================================================= */ --projects-header-cta-x: 330px; --projects-header-cta-y: 0px; --projects-header-cta-font-size: 14px; --projects-header-cta-height: 48px; --projects-header-cta-padding-x: 22px; /* ========================================================= HERO — COMPLETE CONTENT ========================================================= */ --projects-hero-x: 430px; --projects-hero-y: 0px; --projects-hero-container-width: 1500px; /* HERO EYEBROW */ --projects-hero-eyebrow-x: 0px; --projects-hero-eyebrow-y: 0px; --projects-hero-eyebrow-size: 15px; /* HERO MAIN HEADING */ --projects-hero-heading-x: 0px; --projects-hero-heading-y: 0px; --projects-hero-heading-width: 1100px; --projects-hero-heading-size: 72px; --projects-hero-heading-line-height: 1.04; /* HERO PARAGRAPH */ --projects-hero-copy-x: 0px; --projects-hero-copy-y: 0px; --projects-hero-copy-width: 880px; --projects-hero-copy-size: 16px; --projects-hero-copy-line-height: 1.8; /* HERO BUTTON GROUP */ --projects-hero-actions-x: 0px; --projects-hero-actions-y: 0px; --projects-hero-actions-gap: 12px; --projects-hero-actions-top-space: 26px; /* PRIMARY BUTTON */ --projects-primary-button-x: 0px; --projects-primary-button-y: 0px; --projects-primary-button-scale: 1; --projects-primary-button-height: 46px; --projects-primary-button-font-size: 13px; --projects-primary-button-padding-x: 20px; /* SECONDARY BUTTON */ --projects-secondary-button-x: 0px; --projects-secondary-button-y: 0px; --projects-secondary-button-scale: 1; --projects-secondary-button-height: 46px; --projects-secondary-button-font-size: 13px; --projects-secondary-button-padding-x: 20px; /* ========================================================= LIVE PRIVAI SECTION — COMPLETE SECTION ========================================================= */ --projects-live-section-x: 270px; --projects-live-section-y: 0px; /* ========================================================= PRIVAI SECTION HEADING ========================================================= */ --projects-privai-heading-x: 0px; --projects-privai-heading-y: 0px; --projects-privai-heading-width: 1000px; /* LIVE DEMO EYEBROW */ --projects-privai-eyebrow-x: 0px; --projects-privai-eyebrow-y: 0px; --projects-privai-eyebrow-size: 15px; /* LIVE DEMO TITLE */ --projects-privai-title-x: 0px; --projects-privai-title-y: 0px; --projects-privai-title-width: 1000px; --projects-privai-title-size: 56px; /* LIVE DEMO INTRO PARAGRAPH */ --projects-privai-intro-x: 0px; --projects-privai-intro-y: 0px; --projects-privai-intro-width: 860px; --projects-privai-intro-size: 16px; /* ========================================================= LIVE PRIVAI APPLICATION WINDOW ========================================================= */ --projects-privai-demo-x: 0px; --projects-privai-demo-y: 0px; --projects-privai-demo-scale: 1; --projects-privai-demo-width: 100%; --projects-privai-demo-top-space: 36px; --projects-privai-demo-radius: 22px; /* ========================================================= PRIVAI DEMO TOP BAR ========================================================= */ --projects-demo-topbar-height: 60px; --projects-demo-topbar-padding-y: 10px; --projects-demo-topbar-padding-x: 18px; --projects-demo-topbar-gap: 20px; /* STATUS — LEFT */ --projects-demo-status-x: 0px; --projects-demo-status-y: 0px; --projects-demo-status-font-size: 13px; /* STATUS DOT */ --projects-demo-dot-size: 9px; /* CENTER LABEL */ --projects-demo-label-x: 0px; --projects-demo-label-y: 0px; --projects-demo-label-font-size: 12px; /* OPEN FULL SCREEN BUTTON */ --projects-demo-open-x: 0px; --projects-demo-open-y: 0px; --projects-demo-open-scale: 1; --projects-demo-open-height: 36px; --projects-demo-open-font-size: 12px; --projects-demo-open-padding-x: 14px; /* ========================================================= PRIVAI IFRAME / APPLICATION AREA ========================================================= */ --projects-frame-x: 0px; --projects-frame-y: 0px; --projects-frame-width: 100%; --projects-frame-height: min(820px, 78vh); --projects-frame-min-height: 650px; /* ========================================================= FEATURE GRID — COMPLETE GRID ========================================================= */ --projects-feature-grid-x: 0px; --projects-feature-grid-y: 0px; --projects-feature-grid-scale: 1; --projects-feature-grid-width: 100%; --projects-feature-grid-gap: 16px; --projects-feature-grid-top-space: 26px; /* ========================================================= FEATURE CARD 1 ========================================================= */ --projects-feature-card-1-x: 0px; --projects-feature-card-1-y: 0px; --projects-feature-card-1-scale: 1; --projects-feature-content-1-x: 0px; --projects-feature-content-1-y: 0px; --projects-feature-icon-1-x: 0px; --projects-feature-icon-1-y: 0px; /* ========================================================= FEATURE CARD 2 ========================================================= */ --projects-feature-card-2-x: 0px; --projects-feature-card-2-y: 0px; --projects-feature-card-2-scale: 1; --projects-feature-content-2-x: 0px; --projects-feature-content-2-y: 0px; --projects-feature-icon-2-x: 0px; --projects-feature-icon-2-y: 0px; /* ========================================================= FEATURE CARD 3 ========================================================= */ --projects-feature-card-3-x: 0px; --projects-feature-card-3-y: 0px; --projects-feature-card-3-scale: 1; --projects-feature-content-3-x: 0px; --projects-feature-content-3-y: 0px; --projects-feature-icon-3-x: 0px; --projects-feature-icon-3-y: 0px; /* ========================================================= FEATURE CARD 4 ========================================================= */ --projects-feature-card-4-x: 0px; --projects-feature-card-4-y: 0px; --projects-feature-card-4-scale: 1; --projects-feature-content-4-x: 0px; --projects-feature-content-4-y: 0px; --projects-feature-icon-4-x: 0px; --projects-feature-icon-4-y: 0px; /* ========================================================= ALL FEATURE CARD SIZE + TEXT ========================================================= */ --projects-feature-card-min-height: 0px; --projects-feature-card-padding: 21px; --projects-feature-card-radius: 16px; --projects-feature-icon-size: 38px; --projects-feature-icon-font-size: 19px; --projects-feature-title-x: 0px; --projects-feature-title-y: 0px; --projects-feature-title-size: 13px; --projects-feature-text-x: 0px; --projects-feature-text-y: 0px; --projects-feature-text-size: 12px; /* ========================================================= PRIVACY FLOW — COMPLETE SECTION ========================================================= */ --projects-flow-x: 0px; --projects-flow-y: 0px; --projects-flow-scale: 1; --projects-flow-width: 100%; --projects-flow-top-space: 72px; /* ========================================================= PRIVACY FLOW HEADING ========================================================= */ --projects-flow-heading-x: 0px; --projects-flow-heading-y: 0px; --projects-flow-eyebrow-x: 0px; --projects-flow-eyebrow-y: 0px; --projects-flow-eyebrow-size: 15px; --projects-flow-title-x: 0px; --projects-flow-title-y: 0px; --projects-flow-title-width: 1100px; --projects-flow-title-size: 56px; /* ========================================================= PRIVACY FLOW GRID ========================================================= */ --projects-flow-grid-x: 0px; --projects-flow-grid-y: 0px; --projects-flow-grid-width: 100%; --projects-flow-grid-gap: 18px; --projects-flow-grid-top-space: 34px; /* ========================================================= FLOW CARD 1 ========================================================= */ --projects-flow-card-1-x: 0px; --projects-flow-card-1-y: 0px; --projects-flow-card-1-scale: 1; --projects-flow-content-1-x: 0px; --projects-flow-content-1-y: 0px; /* ========================================================= FLOW CARD 2 ========================================================= */ --projects-flow-card-2-x: 0px; --projects-flow-card-2-y: 0px; --projects-flow-card-2-scale: 1; --projects-flow-content-2-x: 0px; --projects-flow-content-2-y: 0px; /* ========================================================= FLOW CARD 3 ========================================================= */ --projects-flow-card-3-x: 0px; --projects-flow-card-3-y: 0px; --projects-flow-card-3-scale: 1; --projects-flow-content-3-x: 0px; --projects-flow-content-3-y: 0px; /* ========================================================= ALL FLOW CARD SIZE + INTERNAL TEXT ========================================================= */ --projects-flow-card-min-height: 220px; --projects-flow-card-padding: 28px; --projects-flow-card-radius: 18px; --projects-flow-number-x: 0px; --projects-flow-number-y: 0px; --projects-flow-number-size: 12px; --projects-flow-number-bottom-space: 28px; --projects-flow-card-title-x: 0px; --projects-flow-card-title-y: 0px; --projects-flow-card-title-size: 20px; --projects-flow-card-text-x: 0px; --projects-flow-card-text-y: 0px; --projects-flow-card-text-size: 13px; /* ========================================================= DEVELOPMENT NOTICE ========================================================= */ --projects-dev-note-x: 0px; --projects-dev-note-y: 0px; --projects-dev-note-scale: 1; --projects-dev-note-width: 100%; --projects-dev-note-top-space: 32px; --projects-dev-note-padding-y: 16px; --projects-dev-note-padding-x: 18px; --projects-dev-note-font-size: 12px; /* ========================================================= FOOTER BRAND COLUMN ========================================================= */ --projects-footer-brand-x: 0px; --projects-footer-brand-y: 0px; --projects-footer-brand-scale: 1; /* ========================================================= FOOTER EXPLORE COLUMN ========================================================= */ --projects-footer-explore-x: 0px; --projects-footer-explore-y: 0px; --projects-footer-explore-scale: 1; /* ========================================================= FOOTER CONTACT COLUMN ========================================================= */ --projects-footer-contact-x: 0px; --projects-footer-contact-y: 0px; --projects-footer-contact-scale: 1; /* ========================================================= FOOTER BOTTOM ========================================================= */ --projects-footer-bottom-x: 0px; --projects-footer-bottom-y: 0px; } /* ===================================================================== DESKTOP / LAPTOP MANUAL CONTROLS ===================================================================== */ @media (min-width: 901px) { /* ========================================================= PAGE BACKGROUND ========================================================= */ html[data-page="projects"] body.subpage main { background-size: var(--projects-background-size) !important; background-position: var(--projects-background-position-x) var(--projects-background-position-y) !important; } /* ========================================================= COMPLETE HEADER CONTAINER ========================================================= */ html[data-page="projects"] .site-header .navbar { width: min( calc(100% - (var(--projects-header-edge-space) * 2)), var(--projects-header-container-width) ) !important; max-width: var(--projects-header-container-width) !important; position: relative; left: var(--projects-header-container-x); top: var(--projects-header-container-y); box-sizing: border-box; } /* ========================================================= HEADER LOGO + BRAND ========================================================= */ html[data-page="projects"] .navbar > .brand { position: relative; left: var(--projects-header-logo-x); top: var(--projects-header-logo-y); font-size: var(--projects-brand-text-size) !important; } html[data-page="projects"] .brand-logo { width: var(--projects-logo-size) !important; height: var(--projects-logo-size) !important; } /* ========================================================= HEADER NAVIGATION ========================================================= */ html[data-page="projects"] .navbar > .nav-links { position: relative; left: var(--projects-header-nav-x); top: var(--projects-header-nav-y); gap: var(--projects-nav-gap) !important; } html[data-page="projects"] .navbar > .nav-links > a { font-size: var(--projects-nav-font-size) !important; padding: var(--projects-nav-padding-y) var(--projects-nav-padding-x) !important; } /* ========================================================= HEADER CTA ========================================================= */ html[data-page="projects"] .navbar > .header-cta { position: relative; left: var(--projects-header-cta-x); top: var(--projects-header-cta-y); min-height: var(--projects-header-cta-height) !important; padding-left: var(--projects-header-cta-padding-x) !important; padding-right: var(--projects-header-cta-padding-x) !important; font-size: var(--projects-header-cta-font-size) !important; } /* ========================================================= HERO — COMPLETE CONTAINER ========================================================= */ html[data-page="projects"] .page-hero > .container { position: relative; left: var(--projects-hero-x); top: var(--projects-hero-y); width: var(--projects-hero-container-width) !important; max-width: none !important; } /* HERO EYEBROW */ html[data-page="projects"] .page-hero > .container > .eyebrow { position: relative; left: var(--projects-hero-eyebrow-x); top: var(--projects-hero-eyebrow-y); font-size: var(--projects-hero-eyebrow-size) !important; } /* HERO MAIN HEADING */ html[data-page="projects"] .page-hero h1 { position: relative; left: var(--projects-hero-heading-x); top: var(--projects-hero-heading-y); width: var(--projects-hero-heading-width) !important; max-width: var(--projects-hero-heading-width) !important; font-size: var(--projects-hero-heading-size) !important; line-height: var(--projects-hero-heading-line-height) !important; } /* HERO PARAGRAPH */ html[data-page="projects"] .projects-hero-copy { position: relative; left: var(--projects-hero-copy-x); top: var(--projects-hero-copy-y); width: var(--projects-hero-copy-width) !important; max-width: var(--projects-hero-copy-width) !important; font-size: var(--projects-hero-copy-size) !important; line-height: var(--projects-hero-copy-line-height) !important; } /* HERO BUTTON GROUP */ html[data-page="projects"] .hero-demo-actions { position: relative; left: var(--projects-hero-actions-x); top: var(--projects-hero-actions-y); gap: var(--projects-hero-actions-gap) !important; margin-top: var(--projects-hero-actions-top-space) !important; } /* PRIMARY BUTTON */ html[data-page="projects"] .privai-primary-button { position: relative; left: var(--projects-primary-button-x); top: var(--projects-primary-button-y); scale: var(--projects-primary-button-scale); min-height: var(--projects-primary-button-height) !important; padding-left: var(--projects-primary-button-padding-x) !important; padding-right: var(--projects-primary-button-padding-x) !important; font-size: var(--projects-primary-button-font-size) !important; } /* SECONDARY BUTTON */ html[data-page="projects"] .privai-secondary-button { position: relative; left: var(--projects-secondary-button-x); top: var(--projects-secondary-button-y); scale: var(--projects-secondary-button-scale); min-height: var(--projects-secondary-button-height) !important; padding-left: var(--projects-secondary-button-padding-x) !important; padding-right: var(--projects-secondary-button-padding-x) !important; font-size: var(--projects-secondary-button-font-size) !important; } /* ========================================================= COMPLETE LIVE PRIVAI SECTION ========================================================= */ html[data-page="projects"] .privai-live-section > .container { position: relative; left: var(--projects-live-section-x); top: var(--projects-live-section-y); max-width: none !important; } /* ========================================================= PRIVAI SECTION HEADING ========================================================= */ html[data-page="projects"] .privai-section-heading { position: relative; left: var(--projects-privai-heading-x); top: var(--projects-privai-heading-y); width: var(--projects-privai-heading-width) !important; max-width: none !important; } /* LIVE DEMO EYEBROW */ html[data-page="projects"] .privai-section-heading > .eyebrow { position: relative; left: var(--projects-privai-eyebrow-x); top: var(--projects-privai-eyebrow-y); font-size: var(--projects-privai-eyebrow-size) !important; } /* LIVE DEMO TITLE */ html[data-page="projects"] .privai-section-heading > .section-title { position: relative; left: var(--projects-privai-title-x); top: var(--projects-privai-title-y); width: var(--projects-privai-title-width) !important; max-width: var(--projects-privai-title-width) !important; font-size: var(--projects-privai-title-size) !important; } /* LIVE DEMO INTRO */ html[data-page="projects"] .privai-demo-intro { position: relative; left: var(--projects-privai-intro-x); top: var(--projects-privai-intro-y); width: var(--projects-privai-intro-width) !important; max-width: var(--projects-privai-intro-width) !important; font-size: var(--projects-privai-intro-size) !important; } /* ========================================================= LIVE PRIVAI WINDOW ========================================================= */ html[data-page="projects"] .privai-demo-wrapper { position: relative; left: var(--projects-privai-demo-x); top: var(--projects-privai-demo-y); scale: var(--projects-privai-demo-scale); width: var(--projects-privai-demo-width) !important; max-width: none !important; margin-top: var(--projects-privai-demo-top-space) !important; border-radius: var(--projects-privai-demo-radius) !important; } /* ========================================================= DEMO TOP BAR ========================================================= */ html[data-page="projects"] .privai-demo-topbar { min-height: var(--projects-demo-topbar-height) !important; gap: var(--projects-demo-topbar-gap) !important; padding: var(--projects-demo-topbar-padding-y) var(--projects-demo-topbar-padding-x) !important; } /* STATUS */ html[data-page="projects"] .privai-status { position: relative; left: var(--projects-demo-status-x); top: var(--projects-demo-status-y); font-size: var(--projects-demo-status-font-size) !important; } html[data-page="projects"] .privai-status-dot { width: var(--projects-demo-dot-size) !important; height: var(--projects-demo-dot-size) !important; } /* CENTER LABEL */ html[data-page="projects"] .privai-demo-label { position: relative; left: var(--projects-demo-label-x); top: var(--projects-demo-label-y); font-size: var(--projects-demo-label-font-size) !important; } /* OPEN FULL SCREEN BUTTON */ html[data-page="projects"] .privai-open-button { position: relative; left: var(--projects-demo-open-x); top: var(--projects-demo-open-y); scale: var(--projects-demo-open-scale); min-height: var(--projects-demo-open-height) !important; padding-left: var(--projects-demo-open-padding-x) !important; padding-right: var(--projects-demo-open-padding-x) !important; font-size: var(--projects-demo-open-font-size) !important; } /* ========================================================= PRIVAI IFRAME ========================================================= */ html[data-page="projects"] .privai-frame-shell { position: relative; left: var(--projects-frame-x); top: var(--projects-frame-y); width: var(--projects-frame-width) !important; max-width: none !important; } html[data-page="projects"] .privai-demo-frame { width: 100% !important; height: var(--projects-frame-height) !important; min-height: var(--projects-frame-min-height) !important; } /* ========================================================= FEATURE GRID — COMPLETE GRID ========================================================= */ html[data-page="projects"] .privai-feature-grid { position: relative; left: var(--projects-feature-grid-x); top: var(--projects-feature-grid-y); scale: var(--projects-feature-grid-scale); width: var(--projects-feature-grid-width) !important; max-width: none !important; gap: var(--projects-feature-grid-gap) !important; margin-top: var(--projects-feature-grid-top-space) !important; } /* ========================================================= FEATURE CARD POSITIONS ========================================================= */ html[data-page="projects"] .privai-feature-grid > .privai-feature-card:nth-child(1) { position: relative; left: var(--projects-feature-card-1-x); top: var(--projects-feature-card-1-y); scale: var(--projects-feature-card-1-scale); } html[data-page="projects"] .privai-feature-grid > .privai-feature-card:nth-child(2) { position: relative; left: var(--projects-feature-card-2-x); top: var(--projects-feature-card-2-y); scale: var(--projects-feature-card-2-scale); } html[data-page="projects"] .privai-feature-grid > .privai-feature-card:nth-child(3) { position: relative; left: var(--projects-feature-card-3-x); top: var(--projects-feature-card-3-y); scale: var(--projects-feature-card-3-scale); } html[data-page="projects"] .privai-feature-grid > .privai-feature-card:nth-child(4) { position: relative; left: var(--projects-feature-card-4-x); top: var(--projects-feature-card-4-y); scale: var(--projects-feature-card-4-scale); } /* ALL FEATURE CARD SIZE */ html[data-page="projects"] .privai-feature-card { min-height: var(--projects-feature-card-min-height) !important; padding: var(--projects-feature-card-padding) !important; border-radius: var(--projects-feature-card-radius) !important; } /* FEATURE ICONS — GLOBAL SIZE */ html[data-page="projects"] .privai-feature-icon { width: var(--projects-feature-icon-size) !important; height: var(--projects-feature-icon-size) !important; flex-basis: var(--projects-feature-icon-size) !important; font-size: var(--projects-feature-icon-font-size) !important; } /* INDIVIDUAL FEATURE ICON POSITION */ html[data-page="projects"] .privai-feature-card:nth-child(1) > .privai-feature-icon { position: relative; left: var(--projects-feature-icon-1-x); top: var(--projects-feature-icon-1-y); } html[data-page="projects"] .privai-feature-card:nth-child(2) > .privai-feature-icon { position: relative; left: var(--projects-feature-icon-2-x); top: var(--projects-feature-icon-2-y); } html[data-page="projects"] .privai-feature-card:nth-child(3) > .privai-feature-icon { position: relative; left: var(--projects-feature-icon-3-x); top: var(--projects-feature-icon-3-y); } html[data-page="projects"] .privai-feature-card:nth-child(4) > .privai-feature-icon { position: relative; left: var(--projects-feature-icon-4-x); top: var(--projects-feature-icon-4-y); } /* INDIVIDUAL FEATURE TEXT BLOCK POSITION */ html[data-page="projects"] .privai-feature-card:nth-child(1) > div:last-child { position: relative; left: var(--projects-feature-content-1-x); top: var(--projects-feature-content-1-y); } html[data-page="projects"] .privai-feature-card:nth-child(2) > div:last-child { position: relative; left: var(--projects-feature-content-2-x); top: var(--projects-feature-content-2-y); } html[data-page="projects"] .privai-feature-card:nth-child(3) > div:last-child { position: relative; left: var(--projects-feature-content-3-x); top: var(--projects-feature-content-3-y); } html[data-page="projects"] .privai-feature-card:nth-child(4) > div:last-child { position: relative; left: var(--projects-feature-content-4-x); top: var(--projects-feature-content-4-y); } /* FEATURE TITLES */ html[data-page="projects"] .privai-feature-card strong { position: relative; left: var(--projects-feature-title-x); top: var(--projects-feature-title-y); font-size: var(--projects-feature-title-size) !important; } /* FEATURE PARAGRAPHS */ html[data-page="projects"] .privai-feature-card p { position: relative; left: var(--projects-feature-text-x); top: var(--projects-feature-text-y); font-size: var(--projects-feature-text-size) !important; } /* ========================================================= PRIVACY FLOW — COMPLETE SECTION ========================================================= */ html[data-page="projects"] .privai-flow-section { position: relative; left: var(--projects-flow-x); top: var(--projects-flow-y); scale: var(--projects-flow-scale); width: var(--projects-flow-width) !important; max-width: none !important; margin-top: var(--projects-flow-top-space) !important; } /* FLOW HEADING EYEBROW + TITLE */ html[data-page="projects"] .privai-flow-section > .eyebrow, html[data-page="projects"] .privai-flow-section > .section-title { position: relative; left: var(--projects-flow-heading-x); top: var(--projects-flow-heading-y); } html[data-page="projects"] .privai-flow-section > .eyebrow { left: calc(var(--projects-flow-heading-x) + var(--projects-flow-eyebrow-x)); top: calc(var(--projects-flow-heading-y) + var(--projects-flow-eyebrow-y)); font-size: var(--projects-flow-eyebrow-size) !important; } html[data-page="projects"] .privai-flow-section > .section-title { left: calc(var(--projects-flow-heading-x) + var(--projects-flow-title-x)); top: calc(var(--projects-flow-heading-y) + var(--projects-flow-title-y)); width: var(--projects-flow-title-width) !important; max-width: var(--projects-flow-title-width) !important; font-size: var(--projects-flow-title-size) !important; } /* ========================================================= FLOW GRID ========================================================= */ html[data-page="projects"] .privai-flow-grid { position: relative; left: var(--projects-flow-grid-x); top: var(--projects-flow-grid-y); width: var(--projects-flow-grid-width) !important; max-width: none !important; gap: var(--projects-flow-grid-gap) !important; margin-top: var(--projects-flow-grid-top-space) !important; } /* ========================================================= FLOW CARD POSITIONS ========================================================= */ html[data-page="projects"] .privai-flow-grid > .privai-flow-card:nth-child(1) { position: relative; left: var(--projects-flow-card-1-x); top: var(--projects-flow-card-1-y); scale: var(--projects-flow-card-1-scale); } html[data-page="projects"] .privai-flow-grid > .privai-flow-card:nth-child(2) { position: relative; left: var(--projects-flow-card-2-x); top: var(--projects-flow-card-2-y); scale: var(--projects-flow-card-2-scale); } html[data-page="projects"] .privai-flow-grid > .privai-flow-card:nth-child(3) { position: relative; left: var(--projects-flow-card-3-x); top: var(--projects-flow-card-3-y); scale: var(--projects-flow-card-3-scale); } /* ALL FLOW CARD SIZE */ html[data-page="projects"] .privai-flow-card { min-height: var(--projects-flow-card-min-height) !important; padding: var(--projects-flow-card-padding) !important; border-radius: var(--projects-flow-card-radius) !important; } /* MOVE ALL CONTENT INSIDE INDIVIDUAL FLOW CARDS */ html[data-page="projects"] .privai-flow-card:nth-child(1) > * { position: relative; left: var(--projects-flow-content-1-x); top: var(--projects-flow-content-1-y); } html[data-page="projects"] .privai-flow-card:nth-child(2) > * { position: relative; left: var(--projects-flow-content-2-x); top: var(--projects-flow-content-2-y); } html[data-page="projects"] .privai-flow-card:nth-child(3) > * { position: relative; left: var(--projects-flow-content-3-x); top: var(--projects-flow-content-3-y); } /* FLOW NUMBER */ html[data-page="projects"] .privai-flow-number { left: calc(var(--projects-flow-number-x)) !important; top: calc(var(--projects-flow-number-y)) !important; margin-bottom: var(--projects-flow-number-bottom-space) !important; font-size: var(--projects-flow-number-size) !important; } /* FLOW TITLE */ html[data-page="projects"] .privai-flow-card h3 { position: relative; left: var(--projects-flow-card-title-x); top: var(--projects-flow-card-title-y); font-size: var(--projects-flow-card-title-size) !important; } /* FLOW PARAGRAPH */ html[data-page="projects"] .privai-flow-card p { position: relative; left: var(--projects-flow-card-text-x); top: var(--projects-flow-card-text-y); font-size: var(--projects-flow-card-text-size) !important; } /* ========================================================= DEVELOPMENT NOTICE ========================================================= */ html[data-page="projects"] .privai-dev-note { position: relative; left: var(--projects-dev-note-x); top: var(--projects-dev-note-y); scale: var(--projects-dev-note-scale); width: var(--projects-dev-note-width) !important; max-width: none !important; margin-top: var(--projects-dev-note-top-space) !important; padding: var(--projects-dev-note-padding-y) var(--projects-dev-note-padding-x) !important; font-size: var(--projects-dev-note-font-size) !important; } /* ========================================================= FOOTER ========================================================= */ html[data-page="projects"] .footer-grid > div:nth-child(1) { position: relative; left: var(--projects-footer-brand-x); top: var(--projects-footer-brand-y); scale: var(--projects-footer-brand-scale); } html[data-page="projects"] .footer-grid > .footer-links:nth-child(2) { position: relative; left: var(--projects-footer-explore-x); top: var(--projects-footer-explore-y); scale: var(--projects-footer-explore-scale); } html[data-page="projects"] .footer-grid > .footer-links:nth-child(3) { position: relative; left: var(--projects-footer-contact-x); top: var(--projects-footer-contact-y); scale: var(--projects-footer-contact-scale); } html[data-page="projects"] .footer-bottom { position: relative; left: var(--projects-footer-bottom-x); top: var(--projects-footer-bottom-y); } } /* ===================================================================== SAFEIFY PROJECTS / PRIVAI — UNIFIED RESPONSIVE DESKTOP/LAPTOP V2 ===================================================================== */ @media (min-width: 901px) { html[data-page="projects"] .site-header .navbar { width: min(calc(100% - clamp(48px, 6vw, 144px)), 1800px) !important; max-width: 1800px !important; left: 0 !important; top: 0 !important; margin-inline: auto !important; } html[data-page="projects"] .navbar > .brand, html[data-page="projects"] .navbar > .nav-links, html[data-page="projects"] .navbar > .header-cta { transform: none !important; } html[data-page="projects"] .brand-logo { width: clamp(34px, 1.8vw, 42px) !important; height: clamp(34px, 1.8vw, 42px) !important; } html[data-page="projects"] .navbar > .brand { font-size: clamp(13px, 0.85vw, 16px) !important; } html[data-page="projects"] .navbar > .nav-links { gap: clamp(16px, 1.35vw, 30px) !important; } html[data-page="projects"] .navbar > .nav-links > a { font-size: clamp(13px, 0.78vw, 17px) !important; padding: 12px clamp(4px, 0.35vw, 8px) !important; } html[data-page="projects"] .page-hero > .container { left: 0 !important; top: 0 !important; width: min(calc(100% - clamp(48px, 6vw, 144px)), 1600px) !important; max-width: 1600px !important; margin-inline: auto !important; } html[data-page="projects"] .page-hero h1 { transform: none !important; width: min(100%, 1120px) !important; max-width: 1120px !important; font-size: clamp(50px, 4vw, 76px) !important; } html[data-page="projects"] .projects-hero-copy { transform: none !important; width: min(100%, 900px) !important; max-width: 900px !important; font-size: clamp(15px, 0.9vw, 17px) !important; } html[data-page="projects"] .hero-demo-actions, html[data-page="projects"] .privai-primary-button, html[data-page="projects"] .privai-secondary-button { transform: none !important; } html[data-page="projects"] .privai-live-section > .container { left: 0 !important; top: 0 !important; width: min(calc(100% - clamp(48px, 6vw, 144px)), 1600px) !important; max-width: 1600px !important; margin-inline: auto !important; } html[data-page="projects"] .privai-section-heading, html[data-page="projects"] .privai-section-heading > .eyebrow, html[data-page="projects"] .privai-section-heading > .section-title, html[data-page="projects"] .privai-demo-intro, html[data-page="projects"] .privai-demo-wrapper, html[data-page="projects"] .privai-feature-grid, html[data-page="projects"] .privai-flow-section, html[data-page="projects"] .privai-flow-section > .eyebrow, html[data-page="projects"] .privai-flow-section > .section-title, html[data-page="projects"] .privai-flow-grid, html[data-page="projects"] .privai-dev-note { transform: none !important; left: 0 !important; top: 0 !important; } html[data-page="projects"] .privai-section-heading, html[data-page="projects"] .privai-flow-section { width: 100% !important; max-width: 100% !important; } html[data-page="projects"] .privai-section-heading > .section-title, html[data-page="projects"] .privai-flow-section > .section-title { width: min(100%, 1100px) !important; max-width: 1100px !important; font-size: clamp(38px, 3vw, 58px) !important; } html[data-page="projects"] .privai-demo-intro { width: min(100%, 900px) !important; max-width: 900px !important; } html[data-page="projects"] .privai-demo-wrapper { width: 100% !important; max-width: 100% !important; margin-inline: auto !important; } html[data-page="projects"] .privai-frame-shell, html[data-page="projects"] .privai-demo-frame { transform: none !important; width: 100% !important; max-width: 100% !important; } html[data-page="projects"] .privai-demo-frame { height: clamp(620px, 68vh, 820px) !important; min-height: 560px !important; } html[data-page="projects"] .privai-feature-grid { width: 100% !important; max-width: 100% !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } html[data-page="projects"] .privai-feature-card, html[data-page="projects"] .privai-feature-card > *, html[data-page="projects"] .privai-flow-card, html[data-page="projects"] .privai-flow-card > * { transform: none !important; } html[data-page="projects"] .privai-flow-grid { width: 100% !important; max-width: 100% !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html[data-page="projects"] .footer-grid > div, html[data-page="projects"] .footer-bottom { transform: none !important; } } @media (min-width: 901px) and (max-width: 1200px) { html[data-page="projects"] .page-hero h1 { font-size: clamp(46px, 5vw, 58px) !important; } html[data-page="projects"] .privai-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html[data-page="projects"] .privai-demo-frame { height: 680px !important; min-height: 560px !important; } }