/* ======================================================================= SAFEIFY — POSITIONING FOR HOME / INDEX PAGE FILE: positioning-home.css ======================================================================= PURPOSE ------- This file contains ONLY manual positioning / size / background controls for Home / Index page. This means: - Editing this file affects ONLY Home / Index page. - It will NOT affect the other pages. LOAD ORDER FOR Home / Index page --------------------------- 1. global.css 2. page-specific main CSS (example: home.css or home.css) 3. responsive.css 4. positioning-home.css <-- this file must be LAST RESPONSIVE SAFETY ----------------- Everything in this file is applied ONLY on screens wider than 900px: @media (min-width: 901px) So: - Desktop / laptop = your manual changes work here - Tablet / mobile = responsive.css keeps automatic control HOW TO EDIT ----------- X values: positive = move right negative = move left Y values: positive = move down negative = move up Scale values: 1 = normal 1.10 = 10% bigger 0.90 = 10% smaller Background size examples: cover contain 120% auto 85% auto auto 120% IMPORTANT --------- This file is fully scoped to: html[data-page="home"] so it cannot affect the other pages. ======================================================================= */ :root { /* ================================================================ PAGE-WIDE / BACKGROUND ================================================================ */ /* HOME HERO BACKGROUND IMAGE PAGE: index.html AFFECTS: only the hero background image */ --home-background-size: cover; --home-background-position-x: 10%; --home-background-position-y: 50%; /* ================================================================ HEADER / TOP NAVIGATION — HOME ONLY ================================================================ */ /* LOGO + BRAND BOX: top-left logo and "Safeify Explore" */ --home-header-logo-x: -330px; --home-header-logo-y: 0px; --home-logo-size: 42px; --home-brand-text-size: 16px; /* HEADER EDGE SPACING Controls the normal distance of the Home header from the left/right browser edges. This is separate from logo X/Y movement. */ --home-header-edge-space: clamp(20px, 3vw, 70px); /* ================================================================ COMPLETE HEADER CONTAINER — HOME ONLY ================================================================ AFFECTS THE WHOLE TOP HEADER: - Logo + Safeify Explore - Navigation links - Start a project button WIDTH: Increase to use more horizontal screen space. Example: 1500px -> 1700px X / Y: Move the COMPLETE header container. negative X = left, positive X = right negative Y = up, positive Y = down MIN HEIGHT: Controls the minimum height of the header container. */ --home-header-container-width: 1800px; --home-header-container-x: 0px; --home-header-container-y: 0px; --home-header-container-min-height: auto; /* MAIN NAVIGATION LINKS BOX: Home | About | Services | Research | Projects | Contact */ --home-header-nav-x: 260px; --home-header-nav-y: 0px; --home-nav-font-size: 18px; --home-nav-padding-y: 14px; --home-nav-padding-x: 8px; --home-nav-gap: 30px; /* START A PROJECT BUTTON BOX: top-right button */ --home-header-cta-x: 300px; --home-header-cta-y: 0px; --home-header-cta-font-size: 14px; --home-header-cta-height: 48px; --home-header-cta-padding-x: 22px; /* HOME CTA COLOR / SHADING Used for Home-page action buttons that should match the Try PrivAI Live blue → green gradient. */ --home-cta-gradient-start: #0c78e8; --home-cta-gradient-middle: #168fe6; --home-cta-gradient-end: #16b995; --home-cta-text-color: #ffffff; --home-cta-border-color: rgba(255, 255, 255, 0.30); --home-cta-radius: 14px; --home-cta-shadow: 0 8px 22px rgba(12, 120, 232, 0.22); --home-cta-hover-shadow: 0 12px 30px rgba(12, 120, 232, 0.30); /* ================================================================ HERO SECTION — HOME ONLY ================================================================ */ /* ================================================================ HOME HERO — COMPLETE ZERO-KNOWLEDGE CONTENT BLOCK ================================================================ PAGE: index.html AFFECTS THE COMPLETE LEFT HERO CONTENT: - "Privacy • Enterprise AI • Zero-Knowledge" - "Zero-Knowledge Privacy Layer for Enterprise AI." - Description paragraph - The buttons remain inside this block, but they also have their own additional fine-position controls below. X: negative = move LEFT positive = move RIGHT Y: negative = move UP positive = move DOWN EXAMPLES: --home-hero-text-x: -80px; -> move whole text block 80px left --home-hero-text-x: 80px; -> move whole text block 80px right --home-hero-text-y: -30px; -> move whole text block 30px up --home-hero-text-y: 30px; -> move whole text block 30px down IMPORTANT: Do NOT add another transform to .home-hero-copy in home.css. This positioning file must be the ONLY place controlling that movement. */ --home-hero-text-x: 800px; --home-hero-text-y: 0px; /* HERO BUTTONS BOX: buttons below the hero text */ --home-hero-buttons-x: 0px; --home-hero-buttons-y: 0px; /* HERO IMAGE / DASHBOARD BOX: right-side preview image */ --home-hero-image-x: 0px; --home-hero-image-y: 0px; /* ================================================================ COMPLETE HERO CONTAINER — HOME ONLY ================================================================ AFFECTS: - Zero-Knowledge content block - Hero buttons - Right-side visual area This controls the OUTER hero container. It is separate from the Zero-Knowledge content-box controls below. */ --home-hero-container-width: 1700px; --home-hero-container-x: 0px; --home-hero-container-y: 0px; --home-hero-container-min-height: 500px; /* ================================================================ HOME HERO — ZERO-KNOWLEDGE CONTENT BOX SIZE ================================================================ PAGE: index.html These controls change the SIZE of the complete left-side content area that contains: - Privacy • Enterprise AI • Zero-Knowledge - Zero-Knowledge Privacy Layer for Enterprise AI. - Description paragraph - Hero buttons WIDTH: Increase --home-hero-content-width to make the content box wider. Example: 620px -> 720px MINIMUM HEIGHT: Increase --home-hero-content-min-height if you want a taller content box. Normally "auto" is best. HEADING WIDTH: Controls how wide the H1 is before it wraps to the next line. PARAGRAPH WIDTH: Controls the width of the description below the heading. LEFT/RIGHT GRID SPACE: --home-hero-left-column controls how much horizontal room is reserved for the text side. --home-hero-right-column controls the empty/visual side. Examples: 1.10fr / 0.90fr = more room for the text 0.88fr / 1.12fr = less room for the text */ --home-hero-content-width: 1280px; --home-hero-content-min-height: 500px; --home-hero-heading-width: 1280px; --home-hero-paragraph-width: 560px; --home-hero-left-column: 1.85fr; --home-hero-right-column: 0.25fr; --home-hero-column-gap: 55px; /* OPTIONAL TEXT SIZE CONTROLS */ --home-hero-heading-size: clamp(48px, 6vw, 78px); --home-hero-description-size: 17px; /* ================================================================ SOLUTION SECTION — HOME ONLY ================================================================ */ /* ================================================================ COMPLETE SOLUTION CONTAINER — HOME ONLY ================================================================ AFFECTS THE WHOLE SECTION: - THE SOLUTION - A privacy boundary the user controls. - Description paragraph - Intercept / Anonymize / Re-identify cards Increase WIDTH to reduce empty left/right space. */ --home-solution-section-width: 1500px; --home-solution-section-x: 0px; --home-solution-section-y: 0px; --home-solution-section-min-height: auto; /* SOLUTION HEADING BLOCK BOX: "THE SOLUTION" + large heading */ --home-solution-heading-x: 0px; --home-solution-heading-y: -30px; /* SOLUTION DESCRIPTION BOX: paragraph beside the heading */ --home-solution-description-x: 0px; --home-solution-description-y: -20px; /* ================================================================ SERVICE CARDS — HOME ONLY ================================================================ */ /* SERVICE BOX 1 — INTERCEPT */ --home-service-box-1-x: 0px; --home-service-box-1-y: -50px; --home-service-box-1-scale: 1; /* SERVICE BOX 2 — ANONYMIZE */ --home-service-box-2-x: 0px; --home-service-box-2-y: -50px; --home-service-box-2-scale: 1; /* SERVICE BOX 3 — RE-IDENTIFY */ --home-service-box-3-x: 0px; --home-service-box-3-y: -50px; --home-service-box-3-scale: 1; /* ================================================================ STATS ROW — HOME ONLY ================================================================ */ /* ================================================================ COMPLETE STATS CONTENT CONTAINER — HOME ONLY ================================================================ AFFECTS: - LOCAL - PII - ANY LLM - ZK NOTE: This changes the INNER stats content container. The ribbon/background band itself can remain full width. */ --home-stats-container-width: 1500px; --home-stats-container-x: 0px; --home-stats-container-y: 0px; --home-stats-container-min-height: auto; /* STATS BACKGROUND BAND HEIGHT Increase this if you want the complete ribbon band taller. */ --home-stats-section-min-height: auto; /* STAT BOX 1 — LOCAL */ --home-stat-box-1-x: 0px; --home-stat-box-1-y: 0px; --home-stat-box-1-scale: 1; /* STAT BOX 2 — PII */ --home-stat-box-2-x: 0px; --home-stat-box-2-y: 0px; --home-stat-box-2-scale: 1; /* STAT BOX 3 — ANY LLM */ --home-stat-box-3-x: 0px; --home-stat-box-3-y: 0px; --home-stat-box-3-scale: 1; /* STAT BOX 4 — ZK */ --home-stat-box-4-x: 0px; --home-stat-box-4-y: 0px; --home-stat-box-4-scale: 1; /* ================================================================ PRIVACY / FINAL CTA SECTION — HOME ONLY ================================================================ */ /* ================================================================ COMPLETE PRIVACY SECTION CONTAINER — HOME ONLY ================================================================ AFFECTS: - PRIVACY BY DESIGN - Main privacy heading - Description - Final CTA box Existing --home-privacy-section-x/y move this complete container. */ --home-privacy-container-width: 1500px; --home-privacy-container-min-height: 10px; /* PRIVACY SECTION CONTENT */ --home-privacy-section-x: 0px; --home-privacy-section-y: 20px; /* FINAL CTA BOX */ --home-final-cta-x: 650px; --home-final-cta-y: -330px; --home-final-cta-scale: 1; /* FINAL CTA BOX SIZE AFFECTS: "Protect sensitive enterprise data..." + Talk to Safeify button */ --home-final-cta-width: 70%; --home-final-cta-min-height: auto; /* ================================================================ REMOVE EMPTY SPACE CREATED BY MOVING CTA UP ================================================================ */ /* Negative value reduces the empty space below the Privacy section. Example: 0px = no correction -100px = reduce space slightly -200px = reduce more -300px = reduce strongly */ --home-privacy-bottom-space-correction: -280px; /* ================================================================ FOOTER — HOME ONLY ================================================================ */ /* ================================================================ COMPLETE FOOTER CONTENT CONTAINER — HOME ONLY ================================================================ AFFECTS: - Footer Safeify Explore column - Explore column - Contact column The footer background can still span the full page width. */ --home-footer-container-width: 1500px; --home-footer-container-x: 0px; --home-footer-container-y: 0px; --home-footer-container-min-height: -10px; /* COMPLETE FOOTER SECTION HEIGHT */ --home-footer-section-min-height: -90px; /* FOOTER BRAND COLUMN */ --home-footer-brand-x: 0px; --home-footer-brand-y: 0px; --home-footer-brand-scale: 1; /* FOOTER EXPLORE COLUMN */ --home-footer-explore-x: 0px; --home-footer-explore-y: 0px; --home-footer-explore-scale: 1; /* FOOTER CONTACT COLUMN */ --home-footer-contact-x: 0px; --home-footer-contact-y: 0px; --home-footer-contact-scale: 1; /* FOOTER BOTTOM ROW */ --home-footer-bottom-x: 0px; --home-footer-bottom-y: 0px; /* ===================================================================== HOME PAGE — VERTICAL SPACE BETWEEN ALL MAJOR CONTAINERS ===================================================================== PURPOSE: Control the empty space above and below each major Home-page section. Smaller value = less empty space Larger value = more empty space Example: 100px = large space 60px = medium space 30px = small space 0px = no extra space ===================================================================== */ /* ================================================================ 1. SOLUTION SECTION Contains: - THE SOLUTION - A privacy boundary the user controls - Intercept - Anonymize - Re-identify BOTTOM mainly controls space between: SOLUTION → LOCAL / PII / ANY LLM / ZK ================================================================ */ --home-solution-padding-top: 50px; --home-solution-padding-bottom: 5px; /* ================================================================ 2. STATISTICS SECTION Contains: - LOCAL - PII - ANY LLM - ZK ================================================================ */ --home-stats-padding-top: 55px; --home-stats-padding-bottom: 55px; /* ================================================================ 3. PRIVACY SECTION Contains: - PRIVACY BY DESIGN - Use powerful AI without exposing... - Description - Final CTA box ================================================================ */ --home-privacy-padding-top: 55px; --home-privacy-padding-bottom: 60px; /* ================================================================ 4. SPACE BETWEEN PRIVACY TEXT AND FINAL CTA BOX Controls space before: "Protect sensitive enterprise data..." ================================================================ */ --home-final-cta-margin-top: 30px; /* ================================================================ 5. FOOTER Controls empty space inside the footer background. ================================================================ */ --home-footer-padding-top: 40px; --home-footer-padding-bottom: 10px; } @media (min-width: 901px) { /* ===================================================================== HOME PAGE — APPLY VERTICAL SECTION SPACING (DESKTOP / LAPTOP ONLY) ===================================================================== These variables keep their original values. The rules are inside @media (min-width: 901px) so responsive.css remains in control on tablet/mobile, as documented at the top. ===================================================================== */ html[data-page="home"] #solution { padding-top: var(--home-solution-padding-top) !important; padding-bottom: var(--home-solution-padding-bottom) !important; } html[data-page="home"] .stats-band { padding-top: var(--home-stats-padding-top) !important; padding-bottom: var(--home-stats-padding-bottom) !important; } html[data-page="home"] main > .section.section-soft { padding-top: var(--home-privacy-padding-top) !important; padding-bottom: var(--home-privacy-padding-bottom) !important; } html[data-page="home"] main > .section.section-soft .cta-band { margin-top: var(--home-final-cta-margin-top) !important; } html[data-page="home"] .site-footer { padding-top: var(--home-footer-padding-top) !important; padding-bottom: var(--home-footer-padding-bottom) !important; } /* ================================================================ PRIVACY SECTION — REMOVE EXTRA BOTTOM SPACE ================================================================ */ html[data-page="home"] main > .section.section-soft { margin-bottom: var(--home-privacy-bottom-space-correction) !important; } /* ================================================================ HOME HEADER + HERO SHARED BACKGROUND ================================================================ This targets .home-top-background because home.css now uses ONE continuous background behind both the navigation and hero. */ html[data-page="home"] .home-top-background { background-size: var(--home-background-size) !important; background-position: var(--home-background-position-x) var(--home-background-position-y) !important; } /* ================================================================ COMPLETE HEADER CONTAINER — APPLY WIDTH / POSITION / HEIGHT ================================================================ */ html[data-page="home"] .site-header .navbar { width: min( calc(100% - (var(--home-header-edge-space) * 2)), var(--home-header-container-width) ) !important; max-width: var(--home-header-container-width) !important; min-height: var(--home-header-container-min-height); position: relative; left: var(--home-header-container-x); top: var(--home-header-container-y); box-sizing: border-box; } /* HEADER */ html[data-page="home"] .navbar > .brand { transform: translate(var(--home-header-logo-x), var(--home-header-logo-y)); font-size: var(--home-brand-text-size) !important; } html[data-page="home"] .brand-logo { width: var(--home-logo-size) !important; height: var(--home-logo-size) !important; } html[data-page="home"] .navbar > .nav-links { transform: translate(var(--home-header-nav-x), var(--home-header-nav-y)); gap: var(--home-nav-gap) !important; } html[data-page="home"] .navbar > .nav-links > a { font-size: var(--home-nav-font-size) !important; padding: var(--home-nav-padding-y) var(--home-nav-padding-x) !important; } html[data-page="home"] .navbar > .header-cta { transform: translate(var(--home-header-cta-x), var(--home-header-cta-y)); min-height: var(--home-header-cta-height) !important; padding-left: var(--home-header-cta-padding-x) !important; padding-right: var(--home-header-cta-padding-x) !important; font-size: var(--home-header-cta-font-size) !important; } /* ========================================================= HOME BUTTON COLORS SAME BLUE → GREEN SHADING AS "TRY PRIVAI LIVE" AFFECTS ONLY: - Start a project - See how it works NOTE: "Talk to us" and the final "Talk to Safeify" button are styled in home.css with the same visual language. ========================================================= */ html[data-page="home"] .site-header .header-cta, html[data-page="home"] .home-hero .hero-actions > a.btn[href="#solution"] { background: linear-gradient( 135deg, var(--home-cta-gradient-start) 0%, var(--home-cta-gradient-middle) 35%, var(--home-cta-gradient-end) 100% ) !important; color: var(--home-cta-text-color) !important; border: 1px solid var(--home-cta-border-color) !important; border-radius: var(--home-cta-radius) !important; box-shadow: var(--home-cta-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; } html[data-page="home"] .site-header .header-cta:hover, html[data-page="home"] .home-hero .hero-actions > a.btn[href="#solution"]:hover { box-shadow: var(--home-cta-hover-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.30); filter: brightness(1.07); } /* ================================================================ COMPLETE HERO CONTAINER — APPLY WIDTH / POSITION / HEIGHT ================================================================ */ html[data-page="home"] .home-hero-inner { width: min( calc(100% - 60px), var(--home-hero-container-width) ) !important; max-width: var(--home-hero-container-width) !important; min-height: var(--home-hero-container-min-height) !important; position: relative; left: var(--home-hero-container-x); top: var(--home-hero-container-y); } /* ================================================================ HOME HERO — APPLY ZERO-KNOWLEDGE CONTENT MOVEMENT ================================================================ This is the ONLY transform that should move .home-hero-copy. Edit --home-hero-text-x / --home-hero-text-y above. Do not edit this rule unless you are changing the CSS system. ================================================================ */ html[data-page="home"] .home-hero-copy { transform: translate( var(--home-hero-text-x), var(--home-hero-text-y) ); } /* ================================================================ HOME HERO — APPLY CONTENT BOX SIZE ================================================================ */ html[data-page="home"] .home-hero-inner { grid-template-columns: minmax(0, var(--home-hero-left-column)) minmax(0, var(--home-hero-right-column)) !important; gap: var(--home-hero-column-gap) !important; } html[data-page="home"] .home-hero-copy { width: min(var(--home-hero-content-width), 100%); min-height: var(--home-hero-content-min-height); } html[data-page="home"] .home-hero-copy h1 { width: min(var(--home-hero-heading-width), 100%); max-width: none; font-size: var(--home-hero-heading-size) !important; } html[data-page="home"] .home-hero-copy > p:not(.eyebrow) { width: min(var(--home-hero-paragraph-width), 100%); max-width: none; font-size: var(--home-hero-description-size) !important; } html[data-page="home"] .home-hero-copy .hero-actions { transform: translate(var(--home-hero-buttons-x), var(--home-hero-buttons-y)); } html[data-page="home"] .home-visual { transform: translate(var(--home-hero-image-x), var(--home-hero-image-y)); } /* ================================================================ COMPLETE SOLUTION CONTAINER — APPLY WIDTH / POSITION / HEIGHT ================================================================ */ html[data-page="home"] #solution > .container { width: min( calc(100% - 60px), var(--home-solution-section-width) ) !important; max-width: var(--home-solution-section-width) !important; min-height: var(--home-solution-section-min-height); position: relative; left: var(--home-solution-section-x); top: var(--home-solution-section-y); } /* SOLUTION */ html[data-page="home"] #solution .home-intro-grid > div:first-child { transform: translate(var(--home-solution-heading-x), var(--home-solution-heading-y)); } html[data-page="home"] #solution .home-intro-grid > .lead { transform: translate(var(--home-solution-description-x), var(--home-solution-description-y)); } /* SERVICES */ html[data-page="home"] .home-services > .home-service-card:nth-child(1) { transform: translate(var(--home-service-box-1-x), var(--home-service-box-1-y)); scale: var(--home-service-box-1-scale); } html[data-page="home"] .home-services > .home-service-card:nth-child(2) { transform: translate(var(--home-service-box-2-x), var(--home-service-box-2-y)); scale: var(--home-service-box-2-scale); } html[data-page="home"] .home-services > .home-service-card:nth-child(3) { transform: translate(var(--home-service-box-3-x), var(--home-service-box-3-y)); scale: var(--home-service-box-3-scale); } /* ================================================================ COMPLETE STATS CONTAINER — APPLY WIDTH / POSITION / HEIGHT ================================================================ */ html[data-page="home"] .stats-band { min-height: var(--home-stats-section-min-height); } html[data-page="home"] .stats-band > .stats-grid { width: min( calc(100% - 60px), var(--home-stats-container-width) ) !important; max-width: var(--home-stats-container-width) !important; min-height: var(--home-stats-container-min-height); position: relative; left: var(--home-stats-container-x); top: var(--home-stats-container-y); } /* STATS */ html[data-page="home"] .stats-grid > .stat:nth-child(1) { transform: translate(var(--home-stat-box-1-x), var(--home-stat-box-1-y)); scale: var(--home-stat-box-1-scale); } html[data-page="home"] .stats-grid > .stat:nth-child(2) { transform: translate(var(--home-stat-box-2-x), var(--home-stat-box-2-y)); scale: var(--home-stat-box-2-scale); } html[data-page="home"] .stats-grid > .stat:nth-child(3) { transform: translate(var(--home-stat-box-3-x), var(--home-stat-box-3-y)); scale: var(--home-stat-box-3-scale); } html[data-page="home"] .stats-grid > .stat:nth-child(4) { transform: translate(var(--home-stat-box-4-x), var(--home-stat-box-4-y)); scale: var(--home-stat-box-4-scale); } /* ================================================================ COMPLETE PRIVACY CONTAINER — APPLY WIDTH / POSITION / HEIGHT ================================================================ */ html[data-page="home"] main > .section.section-soft > .container { width: min( calc(100% - 60px), var(--home-privacy-container-width) ) !important; max-width: var(--home-privacy-container-width) !important; min-height: var(--home-privacy-container-min-height); position: relative; left: var(--home-privacy-section-x); top: var(--home-privacy-section-y); } /* FINAL CTA BOX SIZE */ html[data-page="home"] main > .section.section-soft .cta-band { width: min(var(--home-final-cta-width), 100%); min-height: var(--home-final-cta-min-height); margin-left: auto; margin-right: auto; } /* PRIVACY / CTA */ html[data-page="home"] main > .section.section-soft .cta-band { transform: translate(var(--home-final-cta-x), var(--home-final-cta-y)); scale: var(--home-final-cta-scale); } /* ================================================================ COMPLETE FOOTER CONTAINER — APPLY WIDTH / POSITION / HEIGHT ================================================================ */ html[data-page="home"] .site-footer { /* CSS min-height cannot be negative. The variable value is preserved exactly as supplied; max() safely clamps only the applied result to 0. */ min-height: max(0px, var(--home-footer-section-min-height)); } html[data-page="home"] .site-footer > .footer-grid { width: min( calc(100% - 60px), var(--home-footer-container-width) ) !important; max-width: var(--home-footer-container-width) !important; /* Keep the supplied variable value, but prevent invalid negative min-height. */ min-height: max(0px, var(--home-footer-container-min-height)); position: relative; left: var(--home-footer-container-x); top: var(--home-footer-container-y); } /* FOOTER */ html[data-page="home"] .footer-grid > div:nth-child(1) { transform: translate(var(--home-footer-brand-x), var(--home-footer-brand-y)); scale: var(--home-footer-brand-scale); } html[data-page="home"] .footer-grid > .footer-links:nth-child(2) { transform: translate(var(--home-footer-explore-x), var(--home-footer-explore-y)); scale: var(--home-footer-explore-scale); } html[data-page="home"] .footer-grid > .footer-links:nth-child(3) { transform: translate(var(--home-footer-contact-x), var(--home-footer-contact-y)); scale: var(--home-footer-contact-scale); } html[data-page="home"] .footer-bottom { transform: translate(var(--home-footer-bottom-x), var(--home-footer-bottom-y)); } } /* ===================================================================== RESPONSIVE LOGO ANCHOR — HOME PAGE ===================================================================== PURPOSE: Keep the logo inside the Home header across desktop/laptop widths WITHOUT creating a second logo movement system. MOVE THE LOGO ONLY WITH: --home-header-logo-x --home-header-logo-y The rule below controls only the available header width and safe left/right edge spacing. It does NOT override the logo transform. ===================================================================== */ @media (min-width: 901px) { html[data-page="home"] .site-header .navbar { box-sizing: border-box; } html[data-page="home"] .navbar > .brand { justify-self: start; margin-left: 0; } } /* ===================================================================== SAFEIFY HOME — UNIFIED RESPONSIVE DESKTOP/LAPTOP OVERRIDES (V2) ===================================================================== PURPOSE: - Use ONE fluid layout for every desktop/laptop width above 900px. - Avoid large fixed pixel translations that only look correct on one monitor size. - Scale smoothly from smaller laptops through 1920px and 2560px screens. - Leave tablet/mobile (900px and below) to responsive.css. ===================================================================== */ @media (min-width: 901px) { :root { /* --------------------------------------------------------------- HEADER --------------------------------------------------------------- */ --home-header-container-width: 2400px; --home-header-container-x: 0px; --home-header-container-y: 0px; --home-header-container-min-height: auto; --home-header-edge-space: clamp(24px, 3vw, 72px); /* Remove fixed desktop translations. */ --home-header-logo-x: 0px; --home-header-logo-y: 0px; --home-logo-size: clamp(34px, 1.8vw, 42px); --home-brand-text-size: clamp(13px, 0.85vw, 16px); --home-header-nav-x: 0px; --home-header-nav-y: 0px; --home-nav-font-size: clamp(13px, 0.78vw, 17px); --home-nav-padding-y: 12px; --home-nav-padding-x: clamp(4px, 0.35vw, 8px); --home-nav-gap: clamp(16px, 1.35vw, 30px); --home-header-cta-x: 0px; --home-header-cta-y: 0px; --home-header-cta-font-size: clamp(12px, 0.7vw, 14px); --home-header-cta-height: clamp(42px, 2.3vw, 48px); --home-header-cta-padding-x: clamp(15px, 1vw, 22px); /* --------------------------------------------------------------- HERO --------------------------------------------------------------- */ --home-hero-container-width: 2100px; --home-hero-container-x: 0px; --home-hero-container-y: 0px; --home-hero-container-min-height: clamp(500px, 31vw, 700px); /* No fixed 800px translation. Grid placement handles positioning. */ --home-hero-text-x: 0px; --home-hero-text-y: 0px; --home-hero-buttons-x: 0px; --home-hero-buttons-y: 0px; --home-hero-image-x: 0px; --home-hero-image-y: 0px; --home-hero-content-width: 820px; --home-hero-content-min-height: auto; --home-hero-heading-width: 820px; --home-hero-paragraph-width: 610px; --home-hero-left-column: 1fr; --home-hero-right-column: 1fr; --home-hero-column-gap: clamp(30px, 3.2vw, 82px); /* Smoothly scales: ~48px on small laptop widths ~67px around 1920px max 80px on very large screens */ --home-hero-heading-size: clamp(48px, 3.5vw, 80px); --home-hero-description-size: clamp(15px, 0.9vw, 18px); /* --------------------------------------------------------------- SOLUTION --------------------------------------------------------------- */ --home-solution-section-width: 1700px; --home-solution-section-x: 0px; --home-solution-section-y: 0px; --home-solution-section-min-height: auto; --home-solution-heading-x: 0px; --home-solution-heading-y: 0px; --home-solution-description-x: 0px; --home-solution-description-y: 0px; --home-service-box-1-x: 0px; --home-service-box-1-y: 0px; --home-service-box-2-x: 0px; --home-service-box-2-y: 0px; --home-service-box-3-x: 0px; --home-service-box-3-y: 0px; /* --------------------------------------------------------------- STATS --------------------------------------------------------------- */ --home-stats-container-width: 1700px; --home-stats-container-x: 0px; --home-stats-container-y: 0px; --home-stats-container-min-height: auto; --home-stat-box-1-x: 0px; --home-stat-box-1-y: 0px; --home-stat-box-2-x: 0px; --home-stat-box-2-y: 0px; --home-stat-box-3-x: 0px; --home-stat-box-3-y: 0px; --home-stat-box-4-x: 0px; --home-stat-box-4-y: 0px; /* --------------------------------------------------------------- PRIVACY / FINAL CTA --------------------------------------------------------------- */ --home-privacy-container-width: 1700px; --home-privacy-container-min-height: auto; --home-privacy-section-x: 0px; --home-privacy-section-y: 0px; /* Keep the CTA in document flow instead of moving it 650px / -330px. */ --home-final-cta-x: 0px; --home-final-cta-y: 0px; --home-final-cta-scale: 1; --home-final-cta-width: min(100%, 1120px); --home-final-cta-min-height: auto; --home-final-cta-margin-top: clamp(28px, 2.5vw, 44px); /* No negative page-space compensation is needed anymore. */ --home-privacy-bottom-space-correction: 0px; /* --------------------------------------------------------------- FOOTER --------------------------------------------------------------- */ --home-footer-container-width: 1700px; --home-footer-container-x: 0px; --home-footer-container-y: 0px; --home-footer-container-min-height: auto; --home-footer-section-min-height: 0px; --home-footer-brand-x: 0px; --home-footer-brand-y: 0px; --home-footer-explore-x: 0px; --home-footer-explore-y: 0px; --home-footer-contact-x: 0px; --home-footer-contact-y: 0px; --home-footer-bottom-x: 0px; --home-footer-bottom-y: 0px; } /* --------------------------------------------------------------- HEADER: use the available width naturally --------------------------------------------------------------- */ html[data-page="home"] .site-header .navbar { margin-inline: auto; } /* --------------------------------------------------------------- HERO: place text on the right with GRID, not pixel translation --------------------------------------------------------------- */ html[data-page="home"] .home-hero-inner { grid-template-columns: minmax(0, var(--home-hero-left-column)) minmax(0, var(--home-hero-right-column)) !important; align-items: center; margin-inline: auto; } html[data-page="home"] .home-hero-copy { grid-column: 2; grid-row: 1; justify-self: start; align-self: center; width: min(100%, var(--home-hero-content-width)); max-width: var(--home-hero-content-width); } html[data-page="home"] .home-visual { grid-column: 1; grid-row: 1; } /* --------------------------------------------------------------- FLUID SECTION CONTAINERS --------------------------------------------------------------- */ html[data-page="home"] #solution > .container, html[data-page="home"] .stats-band > .stats-grid, html[data-page="home"] main > .section.section-soft > .container, html[data-page="home"] .site-footer > .footer-grid { margin-inline: auto; } } /* ===================================================================== NORMAL LAPTOP / SMALL DESKTOP 1200px and below, but still above the tablet breakpoint. ===================================================================== */ @media (min-width: 901px) and (max-width: 1200px) { :root { --home-header-edge-space: 24px; --home-nav-font-size: 12px; --home-nav-gap: 10px; --home-nav-padding-x: 3px; --home-header-cta-font-size: 12px; --home-header-cta-padding-x: 12px; --home-hero-container-width: 96vw; --home-hero-container-min-height: 500px; --home-hero-content-width: 600px; --home-hero-heading-width: 600px; --home-hero-paragraph-width: 520px; --home-hero-heading-size: clamp(43px, 4.5vw, 54px); --home-hero-column-gap: 26px; --home-solution-section-width: 94vw; --home-stats-container-width: 94vw; --home-privacy-container-width: 94vw; --home-footer-container-width: 94vw; } } /* ===================================================================== VERY NARROW DESKTOP Protect the navigation immediately before responsive.css switches to the hamburger menu at 900px. ===================================================================== */ @media (min-width: 901px) and (max-width: 1080px) { html[data-page="home"] .site-header .header-cta { display: none !important; } } /* ===================================================================== VERY LARGE MONITOR Keep content comfortably sized instead of allowing endless growth. This is a refinement of the SAME fluid layout, not a separate manual positioning system. ===================================================================== */ @media (min-width: 2200px) { :root { --home-hero-heading-size: clamp(72px, 3.15vw, 82px); --home-hero-description-size: 18px; --home-hero-column-gap: clamp(54px, 3vw, 84px); } }