/* ======================================================================= SAFEIFY — POSITIONING FOR ABOUT PAGE FILE: positioning-about.css ======================================================================= PURPOSE ------- This file contains ONLY manual positioning / size / background controls for About page. This means: - Editing this file affects ONLY About page. - It will NOT affect the other pages. LOAD ORDER FOR About page --------------------------- 1. global.css 2. page-specific main CSS (example: about.css or home.css) 3. responsive.css 4. positioning-about.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="about"] so it cannot affect the other pages. ======================================================================= */ :root { /* PAGE BACKGROUND PAGE: about.html AFFECTS: only the shared page background for this page */ --about-background-size: cover; --about-background-position-x: 50%; --about-background-position-y: 50%; /* HEADER LOGO + BRAND PAGE: about.html */ --about-header-logo-x: -330px; --about-header-logo-y: 0px; --about-logo-size: 42px; --about-brand-text-size: 16px; /* HEADER NAVIGATION LINKS PAGE: about.html */ --about-header-nav-x: 20px; --about-header-nav-y: 0px; --about-nav-font-size: 18px; --about-nav-padding-y: 14px; --about-nav-padding-x: 8px; --about-nav-gap: 30px; /* HEADER CTA BUTTON PAGE: about.html */ --about-header-cta-x: 330px; --about-header-cta-y: 0px; --about-header-cta-font-size: 14px; --about-header-cta-height: 48px; --about-header-cta-padding-x: 22px; /* ================================================================ COMPLETE HEADER CONTAINER — ABOUT PAGE ONLY ================================================================ AFFECTS: - Logo + Safeify Explore - Home / About / Services / Research / Projects / Contact - Start a project WIDTH: Controls the maximum width of the complete header. X / Y: Moves the complete header together. EDGE SPACE: Controls safe distance from browser left/right edges. */ --about-header-container-width: 1800px; --about-header-container-x: 0px; --about-header-container-y: 0px; --about-header-edge-space: clamp(20px, 3vw, 70px); /* HERO CONTENT BOX: top hero heading + paragraph */ --about-hero-x: 970px; --about-hero-y: -20px; --about-hero-heading-width: 1250px; --about-hero-heading-size: 72px; /* OUR STORY IMAGE */ --about-story-image-x: 0px; --about-story-image-y: -170px; --about-story-image-width: 1620px; --about-story-image-height: auto; /* OUR STORY TEXT */ --about-story-text-x: 150px; --about-story-text-y: -50px; --about-story-text-width: 1400px; /* "OUR STORY" small heading */ --about-story-eyebrow-size: 15px; /* Main story heading */ --about-story-heading-width: 1400px; --about-story-heading-size: 52px; /* Story paragraphs */ --about-story-paragraph-width: 1200px; --about-story-paragraph-size: 17px; /* TEAM HEADING */ --about-team-heading-x: 300px; --about-team-heading-y: -200px; --about-team-heading-width: 1300px; --about-team-heading-size: 70px; --about-team-eyebrow-size: 15px; /* ========================================================= COMPLETE TEAM GRID ========================================================= */ --about-team-grid-width: 1200px; --about-team-grid-gap: 30px; /* TEAM BOX 1 — Dr. Sevinj Omarli */ --about-team-box-1-x: 300px; --about-team-box-1-y: -200px; --about-team-box-1-scale: 1; /* TEAM BOX 2 — Dr. Senthil Murugan NAGARAJAN */ --about-team-box-2-x: 300px; --about-team-box-2-y: -200px; --about-team-box-2-scale: 1; /* TEAM BOX 3 — Kamran Ibiyev */ --about-team-box-3-x: 300px; --about-team-box-3-y: -200px; --about-team-box-3-scale: 1; /* ========================================================= ALL TEAM CARD SIZE ========================================================= */ --about-team-card-height: 510px; --about-team-card-radius: 50px; /* ========================================================= TEAM PHOTOS ========================================================= */ --about-team-photo-width: 180px; --about-team-photo-height: 180px; /* ========================================================= TEAM TEXT ========================================================= */ --about-team-name-size: 29px; --about-team-role-size: 18px; --about-team-details-size: 16px; --about-team-body-padding-top: 28px; --about-team-body-padding-x: 36px; --about-team-body-padding-bottom: 38px; /* ========================================================= TEAM BOX INTERNAL CONTENT POSITION ========================================================= */ /* ALL TEAM PHOTOS */ --about-team-photo-x: 0px; --about-team-photo-y: 20px; /* ALL TEAM TEXT */ --about-team-text-x: 0px; --about-team-text-y: 0px; /* ========================================================= OPTIONAL: INDIVIDUAL PHOTO POSITION ========================================================= */ --about-team-photo-1-x: 0px; --about-team-photo-1-y: 0px; --about-team-photo-2-x: 0px; --about-team-photo-2-y: 0px; --about-team-photo-3-x: 0px; --about-team-photo-3-y: 0px; /* ========================================================= OPTIONAL: INDIVIDUAL TEXT POSITION ========================================================= */ --about-team-text-1-x: 0px; --about-team-text-1-y: 0px; --about-team-text-2-x: 0px; --about-team-text-2-y: 0px; --about-team-text-3-x: 0px; --about-team-text-3-y: 0px; /* VALUES HEADING */ --about-values-heading-x: 300px; --about-values-heading-y: -200px; --about-values-heading-width: 1100px; --about-values-heading-size: 60px; --about-values-eyebrow-size: 15px; /* ========================================================= VALUES COMPLETE GRID ========================================================= */ --about-values-grid-width: 1200px; --about-values-grid-gap: 10px; /* VALUE BOX 1 */ --about-value-box-1-x: 300px; --about-value-box-1-y: -100px; --about-value-box-1-scale: 1; /* VALUE BOX 2 */ --about-value-box-2-x: 300px; --about-value-box-2-y: -50px; --about-value-box-2-scale: 1; /* VALUE BOX 3 */ --about-value-box-3-x: 300px; --about-value-box-3-y: 0px; --about-value-box-3-scale: 1; /* ========================================================= VALUE CARD SIZE + TEXT ========================================================= */ --about-value-card-height: 0px; --about-value-number-size: 28px; --about-value-title-size: 28px; --about-value-text-size: 17px; /* ========================================================= VALUE CARD SIZE + TEXT ========================================================= */ --about-value-card-height: 0px; --about-value-number-size: 28px; --about-value-title-size: 28px; --about-value-text-size: 17px; /* ========================================================= VALUE BOX INTERNAL TEXT POSITION Moves ALL content inside each box ========================================================= */ /* BOX 1 */ --about-value-text-1-x: 30px; --about-value-text-1-y: 20px; /* BOX 2 */ --about-value-text-2-x: 30px; --about-value-text-2-y: 20px; /* BOX 3 */ --about-value-text-3-x: 30px; --about-value-text-3-y: 20px; /* MILESTONES HEADING */ --about-milestones-heading-x: 300px; --about-milestones-heading-y: -150px; --about-milestones-heading-width: 1100px; --about-milestones-heading-size: 60px; --about-milestones-eyebrow-size: 15px; /* ========================================================= COMPLETE TIMELINE ========================================================= */ --about-timeline-width: 1500px; --about-timeline-gap: 20px; /* TIMELINE BOX 1 — Idea */ --about-timeline-box-1-x: 300px; --about-timeline-box-1-y: -150px; --about-timeline-box-1-scale: 1; /* TIMELINE BOX 2 — Development */ --about-timeline-box-2-x: 300px; --about-timeline-box-2-y: -150px; --about-timeline-box-2-scale: 1; /* TIMELINE BOX 3 — Next stage */ --about-timeline-box-3-x: 300px; --about-timeline-box-3-y: -150px; --about-timeline-box-3-scale: 1; /* ========================================================= TIMELINE TEXT + SIZE ========================================================= */ --about-timeline-box-height: 150px; --about-timeline-title-size: 20px; --about-timeline-text-size: 16px; /* ========================================================= VALUE BOX INTERNAL TEXT POSITION ========================================================= */ /* BOX 1 */ --about-value-text-1-x: 30px; --about-value-text-1-y: 15px; /* BOX 2 */ --about-value-text-2-x: 30px; --about-value-text-2-y: 15px; /* BOX 3 */ --about-value-text-3-x: 30px; --about-value-text-3-y: 15px; /* FINAL CTA BOX */ --about-final-cta-x: 0px; --about-final-cta-y: 20px; --about-final-cta-scale: 1; --about-final-cta-width: 1500px; --about-final-cta-height: 150px; --about-final-cta-heading-size: 30px; --about-final-cta-button-size: 16px; /* FOOTER BRAND COLUMN PAGE: about.html */ --about-footer-brand-x: 0px; --about-footer-brand-y: 0px; --about-footer-brand-scale: 1; /* FOOTER EXPLORE COLUMN PAGE: about.html */ --about-footer-explore-x: 0px; --about-footer-explore-y: 0px; --about-footer-explore-scale: 1; /* FOOTER CONTACT COLUMN PAGE: about.html */ --about-footer-contact-x: 0px; --about-footer-contact-y: 0px; --about-footer-contact-scale: 1; /* FOOTER BOTTOM ROW PAGE: about.html */ --about-footer-bottom-x: 0px; --about-footer-bottom-y: 0px; } @media (min-width: 901px) { body.subpage[data-page="about"], html[data-page="about"] body.subpage { background-size: var(--about-background-size) !important; background-position: var(--about-background-position-x) var(--about-background-position-y) !important; } /* ================================================================ COMPLETE ABOUT HEADER CONTAINER ================================================================ */ html[data-page="about"] .site-header .navbar { width: min( calc(100% - (var(--about-header-edge-space) * 2)), var(--about-header-container-width) ) !important; max-width: var(--about-header-container-width) !important; position: relative; left: var(--about-header-container-x); top: var(--about-header-container-y); box-sizing: border-box; } html[data-page="about"] .navbar > .brand { transform: translate(var(--about-header-logo-x), var(--about-header-logo-y)); font-size: var(--about-brand-text-size) !important; } html[data-page="about"] .brand-logo { width: var(--about-logo-size) !important; height: var(--about-logo-size) !important; } html[data-page="about"] .navbar > .nav-links { transform: translate(var(--about-header-nav-x), var(--about-header-nav-y)); gap: var(--about-nav-gap) !important; } html[data-page="about"] .navbar > .nav-links > a { font-size: var(--about-nav-font-size) !important; padding: var(--about-nav-padding-y) var(--about-nav-padding-x) !important; } html[data-page="about"] .navbar > .header-cta { transform: translate(var(--about-header-cta-x), var(--about-header-cta-y)); min-height: var(--about-header-cta-height) !important; padding-left: var(--about-header-cta-padding-x) !important; padding-right: var(--about-header-cta-padding-x) !important; font-size: var(--about-header-cta-font-size) !important; } html[data-page="about"] .page-hero > .container { position: relative; left: var(--about-hero-x); top: var(--about-hero-y); } html[data-page="about"] .about-story > div:first-child { transform: translate(var(--about-story-image-x), var(--about-story-image-y)); } html[data-page="about"] .about-story > .about-story-copy { transform: translate(var(--about-story-text-x), var(--about-story-text-y)); } html[data-page="about"] .team-section .team-eyebrow, html[data-page="about"] .team-section .team-title { position: relative; left: var(--about-team-heading-x); top: var(--about-team-heading-y); } html[data-page="about"] .team-grid > .team-card:nth-child(1) { transform: translate(var(--about-team-box-1-x), var(--about-team-box-1-y)); scale: var(--about-team-box-1-scale); } html[data-page="about"] .team-grid > .team-card:nth-child(2) { transform: translate(var(--about-team-box-2-x), var(--about-team-box-2-y)); scale: var(--about-team-box-2-scale); } html[data-page="about"] .team-grid > .team-card:nth-child(3) { transform: translate(var(--about-team-box-3-x), var(--about-team-box-3-y)); scale: var(--about-team-box-3-scale); } html[data-page="about"] .section-soft:has(.values-grid) > .container > .eyebrow, html[data-page="about"] .section-soft:has(.values-grid) > .container > .section-title { position: relative; left: var(--about-values-heading-x); top: var(--about-values-heading-y); } html[data-page="about"] .values-grid > .value-card:nth-child(1) { transform: translate(var(--about-value-box-1-x), var(--about-value-box-1-y)); scale: var(--about-value-box-1-scale); } html[data-page="about"] .values-grid > .value-card:nth-child(2) { transform: translate(var(--about-value-box-2-x), var(--about-value-box-2-y)); scale: var(--about-value-box-2-scale); } html[data-page="about"] .values-grid > .value-card:nth-child(3) { transform: translate(var(--about-value-box-3-x), var(--about-value-box-3-y)); scale: var(--about-value-box-3-scale); } html[data-page="about"] .section:has(.timeline) > .container > .eyebrow, html[data-page="about"] .section:has(.timeline) > .container > .section-title { position: relative; left: var(--about-milestones-heading-x); top: var(--about-milestones-heading-y); } html[data-page="about"] .timeline > .timeline-item:nth-child(1) { transform: translate(var(--about-timeline-box-1-x), var(--about-timeline-box-1-y)); scale: var(--about-timeline-box-1-scale); } html[data-page="about"] .timeline > .timeline-item:nth-child(2) { transform: translate(var(--about-timeline-box-2-x), var(--about-timeline-box-2-y)); scale: var(--about-timeline-box-2-scale); } html[data-page="about"] .timeline > .timeline-item:nth-child(3) { transform: translate(var(--about-timeline-box-3-x), var(--about-timeline-box-3-y)); scale: var(--about-timeline-box-3-scale); } html[data-page="about"] .timeline ~ .cta-band { transform: translate(var(--about-final-cta-x), var(--about-final-cta-y)); scale: var(--about-final-cta-scale); } html[data-page="about"] .footer-grid > div:nth-child(1) { transform: translate(var(--about-footer-brand-x), var(--about-footer-brand-y)); scale: var(--about-footer-brand-scale); } html[data-page="about"] .footer-grid > .footer-links:nth-child(2) { transform: translate(var(--about-footer-explore-x), var(--about-footer-explore-y)); scale: var(--about-footer-explore-scale); } html[data-page="about"] .footer-grid > .footer-links:nth-child(3) { transform: translate(var(--about-footer-contact-x), var(--about-footer-contact-y)); scale: var(--about-footer-contact-scale); } html[data-page="about"] .footer-bottom { transform: translate(var(--about-footer-bottom-x), var(--about-footer-bottom-y)); } /* ========================================================= ABOUT HERO — HEADING + PARAGRAPH CONTROL ========================================================= */ html[data-page="about"] .page-hero > .container { position: relative; left: var(--about-hero-x); top: var(--about-hero-y); width: auto !important; max-width: none !important; } /* MAIN HERO HEADING */ html[data-page="about"] .page-hero h1 { width: var(--about-hero-heading-width) !important; max-width: var(--about-hero-heading-width) !important; font-size: var(--about-hero-heading-size) !important; line-height: 1.05 !important; } /* PARAGRAPH UNDER HERO HEADING */ html[data-page="about"] .page-hero > .container > p:not(.eyebrow) { width: var(--about-hero-paragraph-width) !important; max-width: var(--about-hero-paragraph-width) !important; font-size: var(--about-hero-paragraph-size) !important; } /* ========================================================= HERO SECTION ========================================================= */ html[data-page="about"] .page-hero > .container { position: relative; left: var(--about-hero-x); top: var(--about-hero-y); width: auto !important; max-width: none !important; } html[data-page="about"] .page-hero h1 { width: var(--about-hero-heading-width) !important; max-width: var(--about-hero-heading-width) !important; font-size: var(--about-hero-heading-size) !important; } html[data-page="about"] .page-hero > .container > p:not(.eyebrow) { width: var(--about-hero-paragraph-width) !important; max-width: var(--about-hero-paragraph-width) !important; font-size: var(--about-hero-paragraph-size) !important; } /* ========================================================= OUR STORY IMAGE ========================================================= */ html[data-page="about"] .about-story > div:first-child { transform: translate( var(--about-story-image-x), var(--about-story-image-y) ); } html[data-page="about"] .about-story > div:first-child img { width: var(--about-story-image-width) !important; height: var(--about-story-image-height) !important; max-width: none !important; } /* ========================================================= OUR STORY TEXT CONTAINER ========================================================= */ html[data-page="about"] .about-story > .about-story-copy { position: relative; left: var(--about-story-text-x); top: var(--about-story-text-y); width: var(--about-story-text-width) !important; max-width: none !important; } /* OUR STORY SMALL HEADING */ html[data-page="about"] .about-story-copy > .eyebrow { font-size: var(--about-story-eyebrow-size) !important; } /* OUR STORY MAIN HEADING */ html[data-page="about"] .about-story-copy > .section-title { width: var(--about-story-heading-width) !important; max-width: var(--about-story-heading-width) !important; font-size: var(--about-story-heading-size) !important; } /* OUR STORY PARAGRAPHS */ html[data-page="about"] .about-story-copy > p:not(.eyebrow) { width: var(--about-story-paragraph-width) !important; max-width: var(--about-story-paragraph-width) !important; font-size: var(--about-story-paragraph-size) !important; } /* ========================================================= TEAM HEADING ========================================================= */ html[data-page="about"] .team-section .team-eyebrow, html[data-page="about"] .team-section .team-title { position: relative; left: var(--about-team-heading-x); top: var(--about-team-heading-y); } html[data-page="about"] .team-section .team-eyebrow { font-size: var(--about-team-eyebrow-size) !important; } html[data-page="about"] .team-section .team-title { width: var(--about-team-heading-width) !important; max-width: var(--about-team-heading-width) !important; font-size: var(--about-team-heading-size) !important; } /* ========================================================= COMPLETE TEAM GRID ========================================================= */ html[data-page="about"] .team-grid { width: var(--about-team-grid-width) !important; max-width: none !important; gap: var(--about-team-grid-gap) !important; } /* ========================================================= TEAM BOX POSITIONS ========================================================= */ html[data-page="about"] .team-grid > .team-card:nth-child(1) { transform: translate( var(--about-team-box-1-x), var(--about-team-box-1-y) ); scale: var(--about-team-box-1-scale); } html[data-page="about"] .team-grid > .team-card:nth-child(2) { transform: translate( var(--about-team-box-2-x), var(--about-team-box-2-y) ); scale: var(--about-team-box-2-scale); } html[data-page="about"] .team-grid > .team-card:nth-child(3) { transform: translate( var(--about-team-box-3-x), var(--about-team-box-3-y) ); scale: var(--about-team-box-3-scale); } /* ========================================================= TEAM CARD SIZE ========================================================= */ html[data-page="about"] .team-card { min-height: var(--about-team-card-height) !important; border-radius: var(--about-team-card-radius) !important; } /* ========================================================= TEAM PHOTO SIZE ========================================================= */ html[data-page="about"] .team-photo { width: var(--about-team-photo-width) !important; height: var(--about-team-photo-height) !important; } /* ========================================================= TEAM TEXT ========================================================= */ html[data-page="about"] .team-card h3 { font-size: var(--about-team-name-size) !important; } html[data-page="about"] .team-role { font-size: var(--about-team-role-size) !important; } html[data-page="about"] .team-points { font-size: var(--about-team-details-size) !important; } /* TEAM INTERNAL SPACING */ html[data-page="about"] .team-card-body { padding: var(--about-team-body-padding-top) var(--about-team-body-padding-x) var(--about-team-body-padding-bottom) !important; } /* ========================================================= VALUES HEADING ========================================================= */ html[data-page="about"] .section-soft:has(.values-grid) > .container > .eyebrow, html[data-page="about"] .section-soft:has(.values-grid) > .container > .section-title { position: relative; left: var(--about-values-heading-x); top: var(--about-values-heading-y); } html[data-page="about"] .section-soft:has(.values-grid) > .container > .eyebrow { font-size: var(--about-values-eyebrow-size) !important; } html[data-page="about"] .section-soft:has(.values-grid) > .container > .section-title { width: var(--about-values-heading-width) !important; max-width: var(--about-values-heading-width) !important; font-size: var(--about-values-heading-size) !important; } /* ========================================================= COMPLETE VALUES GRID ========================================================= */ html[data-page="about"] .values-grid { width: var(--about-values-grid-width) !important; max-width: none !important; gap: var(--about-values-grid-gap) !important; } /* ========================================================= VALUE BOX POSITIONS ========================================================= */ html[data-page="about"] .values-grid > .value-card:nth-child(1) { transform: translate( var(--about-value-box-1-x), var(--about-value-box-1-y) ); scale: var(--about-value-box-1-scale); } html[data-page="about"] .values-grid > .value-card:nth-child(2) { transform: translate( var(--about-value-box-2-x), var(--about-value-box-2-y) ); scale: var(--about-value-box-2-scale); } html[data-page="about"] .values-grid > .value-card:nth-child(3) { transform: translate( var(--about-value-box-3-x), var(--about-value-box-3-y) ); scale: var(--about-value-box-3-scale); } /* ========================================================= VALUE CARD SIZE ========================================================= */ html[data-page="about"] .value-card { min-height: var(--about-value-card-height) !important; } /* VALUE TEXT */ html[data-page="about"] .value-card .number { font-size: var(--about-value-number-size) !important; } html[data-page="about"] .value-card h3 { font-size: var(--about-value-title-size) !important; } html[data-page="about"] .value-card p { font-size: var(--about-value-text-size) !important; } /* ========================================================= MILESTONES HEADING ========================================================= */ html[data-page="about"] .section:has(.timeline) > .container > .eyebrow, html[data-page="about"] .section:has(.timeline) > .container > .section-title { position: relative; left: var(--about-milestones-heading-x); top: var(--about-milestones-heading-y); } html[data-page="about"] .section:has(.timeline) > .container > .eyebrow { font-size: var(--about-milestones-eyebrow-size) !important; } html[data-page="about"] .section:has(.timeline) > .container > .section-title { width: var(--about-milestones-heading-width) !important; max-width: var(--about-milestones-heading-width) !important; font-size: var(--about-milestones-heading-size) !important; } /* ========================================================= COMPLETE TIMELINE ========================================================= */ html[data-page="about"] .timeline { width: var(--about-timeline-width) !important; max-width: none !important; gap: var(--about-timeline-gap) !important; } /* ========================================================= TIMELINE BOX POSITIONS ========================================================= */ html[data-page="about"] .timeline > .timeline-item:nth-child(1) { transform: translate( var(--about-timeline-box-1-x), var(--about-timeline-box-1-y) ); scale: var(--about-timeline-box-1-scale); } html[data-page="about"] .timeline > .timeline-item:nth-child(2) { transform: translate( var(--about-timeline-box-2-x), var(--about-timeline-box-2-y) ); scale: var(--about-timeline-box-2-scale); } html[data-page="about"] .timeline > .timeline-item:nth-child(3) { transform: translate( var(--about-timeline-box-3-x), var(--about-timeline-box-3-y) ); scale: var(--about-timeline-box-3-scale); } /* TIMELINE SIZE */ html[data-page="about"] .timeline-item { min-height: var(--about-timeline-box-height) !important; } /* TIMELINE TEXT */ html[data-page="about"] .timeline-item strong { font-size: var(--about-timeline-title-size) !important; } html[data-page="about"] .timeline-item p { font-size: var(--about-timeline-text-size) !important; } /* ========================================================= FINAL CTA ========================================================= */ html[data-page="about"] .timeline ~ .cta-band { position: relative; left: var(--about-final-cta-x); top: var(--about-final-cta-y); scale: var(--about-final-cta-scale); width: var(--about-final-cta-width) !important; max-width: none !important; min-height: var(--about-final-cta-height) !important; } html[data-page="about"] .timeline ~ .cta-band h3 { font-size: var(--about-final-cta-heading-size) !important; } html[data-page="about"] .timeline ~ .cta-band .btn { font-size: var(--about-final-cta-button-size) !important; } /* ========================================================= MOVE ALL TEAM PHOTOS ========================================================= */ html[data-page="about"] .team-card > .team-photo { position: relative; left: var(--about-team-photo-x); top: var(--about-team-photo-y); } /* ========================================================= MOVE ALL TEAM TEXT ========================================================= */ html[data-page="about"] .team-card > .team-card-body { position: relative; left: var(--about-team-text-x); top: var(--about-team-text-y); } /* ========================================================= INDIVIDUAL PHOTO POSITION ========================================================= */ /* TEAM BOX 1 PHOTO */ html[data-page="about"] .team-card:nth-child(1) > .team-photo { transform: translate( var(--about-team-photo-1-x), var(--about-team-photo-1-y) ); } /* TEAM BOX 2 PHOTO */ html[data-page="about"] .team-card:nth-child(2) > .team-photo { transform: translate( var(--about-team-photo-2-x), var(--about-team-photo-2-y) ); } /* TEAM BOX 3 PHOTO */ html[data-page="about"] .team-card:nth-child(3) > .team-photo { transform: translate( var(--about-team-photo-3-x), var(--about-team-photo-3-y) ); } /* ========================================================= INDIVIDUAL TEXT POSITION ========================================================= */ /* TEAM BOX 1 TEXT */ html[data-page="about"] .team-card:nth-child(1) > .team-card-body { transform: translate( var(--about-team-text-1-x), var(--about-team-text-1-y) ); } /* TEAM BOX 2 TEXT */ html[data-page="about"] .team-card:nth-child(2) > .team-card-body { transform: translate( var(--about-team-text-2-x), var(--about-team-text-2-y) ); } /* TEAM BOX 3 TEXT */ html[data-page="about"] .team-card:nth-child(3) > .team-card-body { transform: translate( var(--about-team-text-3-x), var(--about-team-text-3-y) ); } /* ========================================================= MOVE CONTENT INSIDE VALUE BOX 1 ========================================================= */ html[data-page="about"] .values-grid > .value-card:nth-child(1) > * { position: relative; left: var(--about-value-text-1-x); top: var(--about-value-text-1-y); } /* ========================================================= MOVE CONTENT INSIDE VALUE BOX 2 ========================================================= */ html[data-page="about"] .values-grid > .value-card:nth-child(2) > * { position: relative; left: var(--about-value-text-2-x); top: var(--about-value-text-2-y); } /* ========================================================= MOVE CONTENT INSIDE VALUE BOX 3 ========================================================= */ html[data-page="about"] .values-grid > .value-card:nth-child(3) > * { position: relative; left: var(--about-value-text-3-x); top: var(--about-value-text-3-y); } /* ========================================================= VALUE BOX 1 INTERNAL CONTENT ========================================================= */ html[data-page="about"] .values-grid > .value-card:nth-child(1) > * { position: relative; left: var(--about-value-text-1-x); top: var(--about-value-text-1-y); } /* ========================================================= VALUE BOX 2 INTERNAL CONTENT ========================================================= */ html[data-page="about"] .values-grid > .value-card:nth-child(2) > * { position: relative; left: var(--about-value-text-2-x); top: var(--about-value-text-2-y); } /* ========================================================= VALUE BOX 3 INTERNAL CONTENT ========================================================= */ html[data-page="about"] .values-grid > .value-card:nth-child(3) > * { position: relative; left: var(--about-value-text-3-x); top: var(--about-value-text-3-y); } } /* ===================================================================== SAFEIFY ABOUT — UNIFIED RESPONSIVE DESKTOP/LAPTOP OVERRIDES (V2) ===================================================================== */ @media (min-width: 901px) { html[data-page="about"] .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="about"] .navbar > .brand, html[data-page="about"] .navbar > .nav-links, html[data-page="about"] .navbar > .header-cta { transform: none !important; } html[data-page="about"] .brand-logo { width: clamp(34px, 1.8vw, 42px) !important; height: clamp(34px, 1.8vw, 42px) !important; } html[data-page="about"] .navbar > .brand { font-size: clamp(13px, 0.85vw, 16px) !important; } html[data-page="about"] .navbar > .nav-links { gap: clamp(16px, 1.35vw, 30px) !important; } html[data-page="about"] .navbar > .nav-links > a { font-size: clamp(13px, 0.78vw, 17px) !important; padding: 12px clamp(4px, 0.35vw, 8px) !important; } html[data-page="about"] .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="about"] .page-hero h1 { width: min(100%, 1180px) !important; max-width: 1180px !important; font-size: clamp(50px, 4vw, 76px) !important; } html[data-page="about"] .page-hero > .container > p:not(.eyebrow) { width: min(100%, 840px) !important; max-width: 840px !important; font-size: clamp(15px, 0.9vw, 17px) !important; } html[data-page="about"] .about-story { width: min(100%, 1500px) !important; max-width: 1500px !important; margin-inline: auto !important; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important; gap: clamp(40px, 4.5vw, 80px) !important; align-items: center; } html[data-page="about"] .about-story > div:first-child, html[data-page="about"] .about-story > .about-story-copy { transform: none !important; left: 0 !important; top: 0 !important; width: 100% !important; max-width: 100% !important; } html[data-page="about"] .about-story img { width: 100% !important; max-width: 100% !important; height: auto !important; } html[data-page="about"] .about-story .section-title { width: 100% !important; max-width: 760px !important; font-size: clamp(36px, 2.8vw, 52px) !important; } html[data-page="about"] .team-section .team-eyebrow, html[data-page="about"] .team-section .team-title, html[data-page="about"] .section-soft:has(.values-grid) > .container > .eyebrow, html[data-page="about"] .section-soft:has(.values-grid) > .container > .section-title, html[data-page="about"] .section:has(.timeline) > .container > .eyebrow, html[data-page="about"] .section:has(.timeline) > .container > .section-title { left: 0 !important; top: 0 !important; } html[data-page="about"] .team-title, html[data-page="about"] .section-soft:has(.values-grid) .section-title, html[data-page="about"] .section:has(.timeline) .section-title { width: min(100%, 1100px) !important; max-width: 1100px !important; font-size: clamp(38px, 3vw, 58px) !important; } html[data-page="about"] .team-grid, html[data-page="about"] .values-grid, html[data-page="about"] .timeline { width: min(100%, 1500px) !important; max-width: 1500px !important; margin-inline: auto !important; } html[data-page="about"] .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(20px, 2vw, 30px) !important; } html[data-page="about"] .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(18px, 1.7vw, 26px) !important; } html[data-page="about"] .team-card, html[data-page="about"] .value-card, html[data-page="about"] .timeline-item, html[data-page="about"] .team-card > .team-photo, html[data-page="about"] .team-card > .team-card-body, html[data-page="about"] .values-grid > .value-card > * { transform: none !important; left: 0 !important; top: 0 !important; } html[data-page="about"] .team-card { min-width: 0 !important; height: auto !important; min-height: 0 !important; border-radius: clamp(20px, 2vw, 32px) !important; } html[data-page="about"] .team-photo { width: clamp(140px, 10vw, 180px) !important; height: clamp(140px, 10vw, 180px) !important; } html[data-page="about"] .team-card h3 { font-size: clamp(22px, 1.6vw, 29px) !important; } html[data-page="about"] .team-role { font-size: clamp(15px, 1vw, 18px) !important; } html[data-page="about"] .team-points { font-size: clamp(14px, 0.9vw, 16px) !important; } html[data-page="about"] .timeline ~ .cta-band { transform: none !important; left: 0 !important; top: 0 !important; width: min(100%, 1200px) !important; max-width: 1200px !important; height: auto !important; min-height: 0 !important; margin-inline: auto !important; } html[data-page="about"] .footer-grid > div, html[data-page="about"] .footer-bottom { transform: none !important; } } @media (min-width: 901px) and (max-width: 1200px) { html[data-page="about"] .page-hero h1 { font-size: clamp(46px, 5vw, 58px) !important; } html[data-page="about"] .about-story { grid-template-columns: 1fr !important; width: min(calc(100% - 48px), 980px) !important; } html[data-page="about"] .about-story img { width: min(100%, 760px) !important; margin-inline: auto !important; } html[data-page="about"] .team-grid, html[data-page="about"] .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }