/* Sand Valley Studio Built from Figma file 2kyV9aldZfkoaLyxESrcog: desktop frame 5:10101 (1920 wide), phone frame 21:4 (402 wide). Every screen is one viewport tall and split into three bands by the grey rules. Sizes and horizontal positions use --u (one design pixel, scaled to the page width); vertical positions are percentages of the screen, so the bands follow the viewport height. */ @font-face { font-family: "AR One Sans"; src: url("../fonts/ar-one-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } :root { --ink: #f5f5f5; --orange: #ff6400; --line: #686868; --u: calc(100vw / 1920); /* the fixed header measures the viewport */ } *, *::before, *::after { box-sizing: border-box; } html { background: #000; scroll-behavior: smooth; } body { margin: 0; background: #000; color: #fff; font-family: "AR One Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } /* The page measures its own width, so a desktop scrollbar never causes sideways overflow. Kept off : older Safari treated such a container as the box for fixed elements. */ main { display: block; container-type: inline-size; --u: calc(100cqw / 1920); } p, h1, h2 { margin: 0; font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: none; } img { display: block; } sup { line-height: 1; } .screen { position: relative; height: 100svh; overflow: hidden; } .rule { position: absolute; left: calc(50 * var(--u)); right: calc(50 * var(--u)); top: var(--at); border-top: max(1px, calc(1.327 * var(--u))) solid var(--line); } .box { position: absolute; background: #000; } .sq { display: inline-block; flex: none; width: calc(21.231 * var(--u)); height: calc(21.231 * var(--u)); background: var(--orange); } /* Shared type */ .hero-box, .regional-title, .inbuild-box { font-size: calc(49.097 * var(--u)); line-height: 1.1; letter-spacing: calc(-3.4368 * var(--u)); color: var(--ink); } .pillars-intro, .regional-sub p, .inbuild-text { font-size: calc(21.231 * var(--u)); line-height: 1.35; letter-spacing: calc(-0.6369 * var(--u)); color: var(--ink); } .hero-title, .metrics-title { font-weight: 500; font-size: calc(77.72 * var(--u)); line-height: 1.04; letter-spacing: calc(-1.943 * var(--u)); text-align: center; } /* ---------- Header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 10; height: calc(162.751 * var(--u)); pointer-events: none; transition: transform .45s ease; } .site-header > * { pointer-events: auto; } /* The black bar with its deeper tab under the logo (Figma "Union"). */ .site-header::before, .site-header::after { content: ""; position: absolute; top: 0; left: 0; background: #000; transition: height .45s ease; } .site-header::before { right: 0; height: calc(108.643 * var(--u)); } .site-header::after { width: calc(766.764 * var(--u)); height: calc(162.751 * var(--u)); } .site-header .logo { position: absolute; z-index: 1; left: calc(162.58 * var(--u)); top: calc(65.08 * var(--u)); transform-origin: 0 0; transition: transform .45s ease; } .logo { display: flex; align-items: flex-start; gap: calc(14.849 * var(--u)); } .logo-mark { width: calc(39.42 * var(--u)); height: calc(39.42 * var(--u)); } .logo-word { font-weight: 600; font-size: calc(42.642 * var(--u)); line-height: .9; letter-spacing: calc(-2.985 * var(--u)); white-space: nowrap; } .logo-word sup { font-weight: 700; font-size: calc(8.828 * var(--u)); letter-spacing: calc(-0.618 * var(--u)); vertical-align: top; margin-left: calc(-1.5 * var(--u)); } .nav { position: absolute; z-index: 1; left: calc(1472.57 * var(--u)); top: calc(41.14 * var(--u)); display: flex; gap: calc(43.79 * var(--u)); font-weight: 500; font-size: calc(18.577 * var(--u)); line-height: 1.5; letter-spacing: calc(-0.4273 * var(--u)); color: #fffafa; } .nav .is-accent { color: var(--orange); } .menu-toggle { display: none; } /* Past the hero the header is the compact 110px bar of the storyboard frames; it slides away while scrolling down and comes back on the way up. */ .site-header.is-compact::before, .site-header.is-compact::after { height: calc(110 * var(--u)); } .site-header.is-compact .logo { transform: translateY(calc(-23.5 * var(--u))) scale(.6811); } .site-header.is-hidden { transform: translateY(-100%); } /* ---------- 1. Hero ---------- */ .hero-media { position: absolute; left: calc(-176.83 * var(--u)); top: calc(-131.9 * var(--u)); width: calc(2198.35 * var(--u)); height: calc(1795.48 * var(--u)); min-height: calc(100% + 131.9 * var(--u)); } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; } .hero-media::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; background: linear-gradient(89.55deg, rgba(255, 100, 0, .6) 1.43%, rgba(153, 60, 0, .1) 99.68%); } .hero-title { position: absolute; left: 0; right: 0; top: 45.1%; } .hero-by { position: absolute; left: calc(162.63 * var(--u)); bottom: 3.27%; display: flex; align-items: center; gap: calc(14.87 * var(--u)); font-weight: 500; font-size: calc(26.539 * var(--u)); line-height: 1.5; letter-spacing: calc(-0.6104 * var(--u)); } .hero-box { right: 0; bottom: 0; width: calc(621.07 * var(--u)); height: calc(177.81 * var(--u)); padding: calc(33.84 * var(--u)) 0 0 calc(60.69 * var(--u)); } /* ---------- 2. Pillars ---------- */ .pillars { --pillars-rule-1: 33.333%; --pillars-rule-2: 66.667%; } .pillars-intro { position: absolute; left: calc(162.63 * var(--u)); top: 2.6%; } .pillar { position: absolute; left: calc(49.63 * var(--u)); transform: translateY(-50%); font-size: calc(170.678 * var(--u)); line-height: 1.02; letter-spacing: calc(-5.1203 * var(--u)); white-space: pre; } .p1 { top: 16.667%; } .p2 { top: 50%; } .p3 { top: 83.333%; } .pillar .no { position: absolute; top: 0; font-weight: 600; font-size: calc(45.514 * var(--u)); line-height: 1.1; letter-spacing: calc(-3.186 * var(--u)); color: var(--orange); } .p1 .no { left: calc(1534.34 * var(--u)); } .p2 .no { left: calc(1352.36 * var(--u)); } .p3 .no { left: calc(1161.91 * var(--u)); } /* ---------- 3. Regional advantage ---------- */ .regional-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .regional-title { left: 0; top: 0; width: calc(618.36 * var(--u)); height: calc(177.81 * var(--u)); padding: calc(30.89 * var(--u)) 0 0 calc(162.63 * var(--u)); } .regional-sub { right: 0; bottom: 0; width: calc(626.73 * var(--u)); height: calc(177 * var(--u)); padding: calc(59.5 * var(--u)) 0 0 calc(65.92 * var(--u)); } .regional-sub p { width: calc(353.92 * var(--u)); } /* ---------- Sections that hold in place ---------- */ /* A .pin wrapper is taller than the screen by --len screens. Its .pin-stage sticks to the top while the page scrolls through that extra length, and site.js sets --p from 0 to 1 over it. --s is the same distance counted in screens, so every step below reads as "starts after N screens of scrolling, lasts M". Without JS, or when the visitor asks for reduced motion, none of this applies and the sections simply follow each other. */ .pin { position: relative; } /* The menu's targets: the two sections here; with the pin, the moments worth landing on. */ .pin-mark { position: absolute; left: 0; top: 0; } #sectors { top: 100svh; } /* Pillars (storyboard Frames 40 to 45), then the regional picture it uncovers: 0 to 0.96 the three lines slide in from the right, one after another, faded until they land 0.96 to 1.2 all three in place (Frame 42) 1.2 to 2.2 the black panel slides off to the left; its text dims to 30% on the way 2.2 to 2.45 the two text boxes on the picture appear (their own effect comes next) */ .pillars { --travel: calc(1886.7 * var(--u)); } /* from just past the right edge to home */ @media (prefers-reduced-motion: no-preference) { .js .pin { --s: calc(var(--p, 0) * var(--len)); height: calc(100svh * (1 + var(--len))); } .js .pin-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; } .js .pin-stage > .screen { position: absolute; inset: 0; } .js .pin-pillars { --len: 2.5; } .js #studio { top: calc(1.1 * 100svh); } /* all three lines in place */ .js #sectors { top: calc(2.5 * 100svh); } /* picture uncovered, boxes in */ .js .pillars { z-index: 1; background: #000; --tp: clamp(0, (var(--s) - 1.2) / 1, 1); --ep: calc(var(--tp) * var(--tp)); /* speeds up as it leaves */ --fade: calc(1 - .7 * clamp(0, var(--ep) / .4386, 1)); /* 30% once 842 of 1920 gone */ translate: calc(-100% * var(--ep)) 0; will-change: translate; } .js .pillar { --t: clamp(0, (var(--s) - var(--in)) / .55, 1); --e: calc(1 - (1 - var(--t)) * (1 - var(--t)) * (1 - var(--t))); /* slows as it lands */ translate: calc((1 - var(--e)) * var(--travel)) 0; opacity: calc((.3 + .7 * clamp(0, (var(--e) - .5) / .35, 1)) * var(--fade)); will-change: translate, opacity; } .js .p1 { --in: 0; } .js .p2 { --in: .205; } .js .p3 { --in: .41; } .js .pillars-intro { opacity: var(--fade); } .js .pin-pillars .regional .box { opacity: clamp(0, (var(--s) - 2.2) / .25, 1); } } /* ---------- 4. Sectors ---------- */ .sectors { --sectors-rule-1: 33.333%; --sectors-rule-2: 66.667%; } .sectors-lead { position: absolute; left: calc(1292.83 * var(--u)); top: 14.76%; display: flex; align-items: center; gap: calc(16.64 * var(--u)); font-weight: 500; font-size: calc(26.539 * var(--u)); line-height: 1.5; letter-spacing: calc(-0.6104 * var(--u)); } .sector-row { position: absolute; white-space: pre; color: #414141; } .sector-row .is-on { color: #fff; } .sector-row.d { left: calc(-454.61 * var(--u)); top: 49.44%; transform: translateY(-50%); font-size: calc(170 * var(--u)); line-height: 1.02; letter-spacing: calc(-5.1 * var(--u)); } .sector-sq { position: absolute; } .sector-sq.d { left: calc(153.59 * var(--u)); top: 50%; transform: translateY(-50%); } /* ---------- 5. Metrics (split image) ---------- */ .metrics { --metrics-rule-1: 33.333%; --metrics-rule-2: 66.667%; } /* The same picture twice, halves swapped: the left half shows its right side. */ .metrics-media { position: absolute; inset: 0; display: flex; } .metrics-media .half { width: 50%; height: 100%; object-fit: cover; } .metrics-media .left { object-position: 100% 50%; } .metrics-media .right { object-position: 0 50%; } .metrics-title { position: absolute; left: 0; right: 0; top: 50.19%; transform: translateY(-50%); } /* ---------- 6. Model (comparison table) ---------- */ .model { --model-rule-1: 33.333%; --model-rule-2: 66.667%; } .model-title { left: calc(288.29 * var(--u)); top: 5.54%; background: none; font-size: calc(31.564 * var(--u)); line-height: 1.1; letter-spacing: calc(-2.2095 * var(--u)); color: var(--ink); } .compare { position: absolute; left: calc(288.29 * var(--u)); top: calc(33.333% - 71.66 * var(--u)); border-collapse: collapse; } .compare thead, .compare tbody { display: block; } .compare tr { display: grid; grid-template-columns: calc(301.63 * var(--u)) calc(305.6 * var(--u)) calc(290.72 * var(--u)) calc(253.88 * var(--u)) calc(175.25 * var(--u)); align-items: center; } .compare th, .compare td { padding: 0; text-align: left; font-weight: 500; } .compare thead tr { height: calc(71.66 * var(--u)); background: linear-gradient(to right, transparent calc(224.08 * var(--u)), #e9e9e9 0); font-size: calc(21.231 * var(--u)); line-height: 1.35; letter-spacing: calc(-0.6369 * var(--u)); color: #707070; } .compare tbody tr { height: calc(100svh / 6); font-size: calc(21.231 * var(--u)); line-height: 1.35; letter-spacing: calc(-0.6369 * var(--u)); } .compare tbody th { padding-left: calc(50.4 * var(--u)); font-size: calc(26.539 * var(--u)); line-height: 1.19; letter-spacing: calc(-0.7962 * var(--u)); } .compare .us { background: linear-gradient(to right, var(--orange) calc(7.96 * var(--u)), #313131 0); color: #fff; } .compare .them { background: linear-gradient(to right, #313131 calc(7.96 * var(--u)), #1e1e1e 0); color: #919191; } .compare .them td { font-weight: 400; } .vs { display: grid; place-items: center; background: #d9d9d9; color: #1e1e1e; font-weight: 500; line-height: 1.19; } .model > .vs { position: absolute; left: calc(338.69 * var(--u)); top: calc(50% - 18.91 * var(--u)); width: calc(42.46 * var(--u)); height: calc(34.5 * var(--u)); font-size: calc(18.577 * var(--u)); letter-spacing: calc(-0.5573 * var(--u)); } .compare-m { display: none; } .ppp { position: absolute; left: calc(148.15 * var(--u)); top: 83.21%; transform: translateY(-50%); white-space: nowrap; font-size: calc(54.207 * var(--u)); line-height: 1.19; letter-spacing: calc(-1.6262 * var(--u)); color: #9e9e9e; } .ppp b { position: relative; font-weight: 500; color: #fff; } .ppp .dim { color: #414141; } .ppp .ico { position: absolute; left: calc(100% - 6 * var(--u)); top: calc(-15.1 * var(--u)); width: calc(21.23 * var(--u)); height: auto; } /* ---------- 7. In Build ---------- */ .inbuild { --inbuild-rule: 66.667%; } .inbuild-media { position: absolute; left: 0; top: 0; width: 100%; height: 33.333%; } /* Figma squashes the whole picture into the band (it is not a crop). */ .inbuild-media img { width: 100%; height: 100%; object-fit: fill; } .inbuild-box { right: 0; top: calc(33.333% - 175.2 * var(--u)); width: calc(625.98 * var(--u)); height: calc(175.2 * var(--u)); padding: calc(64.27 * var(--u)) 0 0 calc(95.97 * var(--u)); } .qantara { position: absolute; left: calc(777.08 * var(--u)); top: calc(66.667% - 193.41 * var(--u)); width: calc(952.06 * var(--u)); height: calc(220.35 * var(--u)); } .inbuild-kicker { position: absolute; left: calc(221.23 * var(--u)); bottom: 33.333%; font-size: calc(33.174 * var(--u)); line-height: 1.25; letter-spacing: calc(-0.9952 * var(--u)); color: var(--ink); } .inbuild-text { position: absolute; left: calc(221.23 * var(--u)); top: calc(66.667% + 76.88 * var(--u)); width: calc(353.92 * var(--u)); } .learn { position: absolute; left: calc(221.23 * var(--u)); top: calc(66.667% + 207.85 * var(--u)); padding-bottom: calc(2.4 * var(--u)); border-bottom: calc(1.99 * var(--u)) solid var(--orange); font-weight: 600; font-size: calc(21.231 * var(--u)); line-height: 1.35; letter-spacing: calc(-0.6369 * var(--u)); color: var(--orange); } .next { position: absolute; left: calc(1373.62 * var(--u)); top: calc(66.667% + 205.86 * var(--u)); font-size: calc(26.539 * var(--u)); white-space: nowrap; } .next .n { display: inline-block; width: calc(59.27 * var(--u)); margin-right: calc(-0.28em); font-weight: 600; color: var(--orange); } .next .a { color: #acacac; } .next .b { color: #3d3d3d; } /* ---------- 8. Contact + footer ---------- */ .contact-media { position: absolute; left: 0; top: 0; width: 100%; height: 66.667%; display: block; } .contact-media img { width: 100%; height: 100%; object-fit: cover; } .contact-media::before, .contact-media::after { content: ""; position: absolute; top: 0; bottom: 0; } .contact-media::before { left: 0; width: calc(397.7 * var(--u)); background: #000; } .contact-media::after { left: calc(397.42 * var(--u)); width: calc(358.28 * var(--u)); background: linear-gradient(to right, #000, transparent); } .shower { position: absolute; left: calc(209.75 * var(--u)); top: 24.95%; font-size: calc(99.522 * var(--u)); line-height: 1.02; letter-spacing: calc(-2.9856 * var(--u)); } .pitch { position: absolute; left: calc(1129.61 * var(--u)); top: 30%; font-size: calc(33.174 * var(--u)); line-height: 1.35; letter-spacing: calc(-0.9952 * var(--u)); } .pitch b { font-weight: 600; } .btn { display: inline-flex; align-items: center; justify-content: center; margin-top: calc(60.8 * var(--u)); width: calc(186.81 * var(--u)); height: calc(53.05 * var(--u)); background: var(--orange); color: #fff; font-weight: 700; font-size: calc(21.231 * var(--u)); line-height: 1; letter-spacing: calc(-0.6369 * var(--u)); } .site-footer { position: absolute; left: 0; right: 0; top: 66.667%; bottom: 0; } .logo-foot { position: absolute; left: calc(225.04 * var(--u)); top: calc(125.29 * var(--u)); align-items: center; gap: calc(13.205 * var(--u)); } .logo-foot .logo-mark { width: calc(64.48 * var(--u)); height: calc(64.48 * var(--u)); } .logo-foot .logo-word { font-size: calc(37.921 * var(--u)); letter-spacing: calc(-2.6545 * var(--u)); } .logo-foot .logo-word sup { font-size: calc(7.851 * var(--u)); } .contacts { position: absolute; left: calc(1129.61 * var(--u)); top: calc(145.6 * var(--u)); display: grid; grid-template-columns: calc(159.81 * var(--u)) calc(159.37 * var(--u)) auto; white-space: nowrap; font-size: calc(18.577 * var(--u)); line-height: 1.55; letter-spacing: calc(-0.5573 * var(--u)); color: var(--ink); } .contacts .k { font-weight: 600; color: var(--orange); } .social { position: absolute; left: calc(1641.75 * var(--u)); top: calc(145.61 * var(--u)); display: flex; align-items: center; gap: calc(34.62 * var(--u)); } .social .li { width: calc(25.21 * var(--u)); height: calc(24.33 * var(--u)); } .social .xx { width: calc(23.62 * var(--u)); height: calc(21.73 * var(--u)); } .foot-rule { --at: calc(100% - 1px); } .owner { position: absolute; left: calc(225.04 * var(--u)); bottom: calc(20.26 * var(--u)); font-weight: 500; font-size: calc(21.231 * var(--u)); line-height: 1.5; letter-spacing: calc(-0.4883 * var(--u)); } .legal { position: absolute; left: calc(1129.61 * var(--u)); bottom: calc(22.12 * var(--u)); display: grid; grid-template-columns: calc(334.4 * var(--u)) auto; white-space: nowrap; font-size: calc(15.923 * var(--u)); line-height: 1.55; letter-spacing: calc(-0.4777 * var(--u)); color: var(--ink); } /* Desktop-only (.d) and phone-only (.m) pieces. Kept after the components so they win. */ .m { display: none; } /* ================= Phone (Figma frame 21:4, 402 wide, 874 per screen) ================= */ @media (max-width: 767px) { :root { --u: calc(100vw / 402); } main { --u: calc(100cqw / 402); } .d { display: none; } .m { display: revert; } .rule { left: calc(30 * var(--u)); right: calc(30 * var(--u)); } .sq { width: calc(18 * var(--u)); height: calc(18 * var(--u)); } .hero-box, .regional-title, .inbuild-box, .model-title { font-size: calc(36 * var(--u)); letter-spacing: calc(-2.52 * var(--u)); } .pillars-intro, .regional-sub p, .inbuild-text { font-size: calc(16 * var(--u)); letter-spacing: calc(-0.48 * var(--u)); } .hero-title, .metrics-title { font-size: calc(59 * var(--u)); letter-spacing: calc(-1.475 * var(--u)); } /* Header: a 120px bar with the menu button; the links open as a full-screen list. */ .site-header { height: calc(120 * var(--u)); } .site-header::before, .site-header.is-compact::before { height: calc(120 * var(--u)); } .site-header::after { display: none; } .site-header .logo, .site-header.is-compact .logo { left: calc(32 * var(--u)); top: calc(49.7 * var(--u)); transform: none; } .logo { gap: calc(10.85 * var(--u)); } .logo-mark { width: calc(23.98 * var(--u)); height: calc(23.98 * var(--u)); } .logo-word { font-size: calc(25.53 * var(--u)); letter-spacing: calc(-1.787 * var(--u)); } .logo-word sup { font-size: calc(5.3 * var(--u)); } .menu-toggle { display: block; position: absolute; z-index: 1; left: calc(344.4 * var(--u)); top: calc(50.7 * var(--u)); width: calc(26 * var(--u)); height: calc(20 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; } .menu-toggle span { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: transform .3s ease, opacity .3s ease; } .menu-toggle span:nth-child(1) { top: 0; } .menu-toggle span:nth-child(2) { top: calc(50% - 1px); } .menu-toggle span:nth-child(3) { bottom: 0; } .is-open .menu-toggle span:nth-child(1) { transform: translateY(calc(10 * var(--u) - 1px)) rotate(45deg); } .is-open .menu-toggle span:nth-child(2) { opacity: 0; } .is-open .menu-toggle span:nth-child(3) { transform: translateY(calc(-10 * var(--u) + 1px)) rotate(-45deg); } .nav { position: fixed; left: 0; right: 0; top: calc(120 * var(--u)); height: calc(100svh - 120 * var(--u)); display: none; flex-direction: column; gap: 0; padding: 0 calc(30 * var(--u)); background: #000; font-weight: 400; font-size: calc(36 * var(--u)); line-height: 1.1; letter-spacing: calc(-2.52 * var(--u)); } .nav a { padding: calc(28 * var(--u)) 0; border-top: 1px solid var(--line); } .is-open .nav { display: flex; } /* 1. Hero */ .hero-media { left: 50%; top: calc(120 * var(--u)); width: calc(862.52 * var(--u)); height: calc(100% - 169.54 * var(--u)); min-height: 0; transform: translateX(-50%); } .hero-title { top: 39.52%; } .hero-by { left: calc(30 * var(--u)); bottom: calc(59.13 * var(--u)); align-items: flex-start; gap: calc(10 * var(--u)); width: calc(159.52 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: calc(-0.368 * var(--u)); } .hero-by .sq { margin-top: calc(3 * var(--u)); } .hero::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(229.87 * var(--u)); height: calc(53.08 * var(--u)); background: #000; } .hero-box { width: calc(190 * var(--u)); height: calc(122 * var(--u)); padding: calc(12.25 * var(--u)) 0 0 calc(26.87 * var(--u)); } /* 2. Pillars */ .pillars { --pillars-rule-1: 35.62%; --pillars-rule-2: 68.96%; --travel: calc(376 * var(--u)); } .pillars-intro { left: calc(29.32 * var(--u)); top: 5.72%; width: calc(217.68 * var(--u)); } .pillar { left: calc(30 * var(--u)); transform: none; font-size: calc(69.579 * var(--u)); letter-spacing: calc(-2.0874 * var(--u)); } .p1 { top: 13.83%; } .p2 { top: 42.44%; } .p3 { top: 74.63%; } .pillar .no { top: calc(91.6 * var(--u)); font-size: calc(18.554 * var(--u)); letter-spacing: calc(-1.2988 * var(--u)); } .p1 .no, .p2 .no { left: calc(320.68 * var(--u)); } .p3 .no { left: calc(233 * var(--u)); } /* 3. Regional advantage */ .regional-media { inset: 0 auto auto 50%; width: auto; height: 112.4%; max-width: none; transform: translateX(-50%); } .regional-title { width: calc(320 * var(--u)); height: calc(168 * var(--u)); padding: calc(60 * var(--u)) 0 0 calc(26.87 * var(--u)); } .regional-sub { width: calc(300 * var(--u)); height: calc(122 * var(--u)); padding: calc(39 * var(--u)) 0 0 calc(15 * var(--u)); } .regional-sub p { width: calc(270 * var(--u)); } /* 4. Sectors */ .sectors { --sectors-rule-1: 35.6%; --sectors-rule-2: 68.93%; } .sectors-lead { left: calc(30 * var(--u)); top: 6.86%; align-items: flex-start; gap: calc(10 * var(--u)); width: calc(197 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: calc(-0.368 * var(--u)); } .sectors-lead .sq { margin-top: calc(3 * var(--u)); } .sector-row.m { font-size: calc(60 * var(--u)); line-height: 1.02; letter-spacing: calc(-1.8 * var(--u)); color: #343434; } .sector-row.r1 { right: calc(29.61 * var(--u)); top: 19.62%; } .sector-row.r2 { left: calc(68 * var(--u)); top: 46.91%; } .sector-row.r3 { right: calc(29.61 * var(--u)); top: 80.1%; } .sector-sq.m { left: calc(30 * var(--u)); top: 49.58%; } /* 5. Metrics */ .metrics { --metrics-rule-1: 35.64%; --metrics-rule-2: 68.98%; } .metrics-media .left { width: 100%; object-position: 0 50%; } .metrics-media .right { display: none; } .metrics-title { top: 41.78%; transform: none; } /* 6. Model: the table turns into two columns */ .model .rule, .compare, .model > .vs { display: none; } .model-title { left: 0; top: 0; width: calc(320 * var(--u)); height: calc(168 * var(--u)); padding: calc(60 * var(--u)) 0 0 calc(26.87 * var(--u)); background: #000; } .model-title h2 { width: calc(273.13 * var(--u)); } .compare-m { position: absolute; left: calc(30 * var(--u)); top: 22.45%; display: grid; grid-template-columns: repeat(3, calc(114 * var(--u))); grid-template-rows: calc(6 * var(--u)) calc(115.75 * var(--u)) repeat(4, calc(104.5 * var(--u))); font-weight: 500; font-size: calc(16 * var(--u)); letter-spacing: calc(-0.48 * var(--u)); text-align: center; } .compare-m .us { grid-column: 2; background: #313131; color: #fff; } .compare-m .them { grid-column: 3; background: #1e1e1e; color: #919191; } .compare-m .c-bar { grid-row: 1; } .compare-m .c-bar.us { background: var(--orange); } .compare-m .c-bar.them { background: #292929; } .compare-m .c-head { grid-row: 2; padding-top: calc(24.22 * var(--u)); line-height: 1.19; } .compare-m .c-label, .compare-m .c-val { grid-row: var(--row); display: grid; place-items: center; } .compare-m .c-label { grid-column: 1; background: #e9e9e9; color: #707070; line-height: 1.2; } .compare-m .c-val.them { font-weight: 400; } .compare-m .vs { position: absolute; left: calc(208.46 * var(--u)); top: calc(94.25 * var(--u)); width: calc(40 * var(--u)); height: calc(28 * var(--u)); font-size: calc(14 * var(--u)); letter-spacing: calc(-0.42 * var(--u)); } .ppp { left: calc(30 * var(--u)); top: 89.91%; transform: none; font-size: calc(28 * var(--u)); letter-spacing: calc(-0.84 * var(--u)); color: #4f4f4f; } .ppp b ~ b, .ppp .dim { color: #4f4f4f; } .ppp .ico { left: calc(100% - 5 * var(--u)); top: calc(-6 * var(--u)); width: calc(12 * var(--u)); } /* 7. In Build */ .inbuild { --inbuild-rule: 51.56%; } .inbuild-box { top: calc(33.333% - 101.82 * var(--u)); width: calc(190 * var(--u)); height: calc(101.82 * var(--u)); padding: calc(12.25 * var(--u)) 0 0 calc(26.87 * var(--u)); } .qantara { left: calc(31.76 * var(--u)); top: calc(51.56% - 69.17 * var(--u)); width: calc(340.24 * var(--u)); height: calc(78.75 * var(--u)); } .inbuild-kicker { left: calc(30 * var(--u)); top: calc(51.56% + 56.04 * var(--u)); bottom: auto; font-size: calc(28 * var(--u)); letter-spacing: calc(-0.84 * var(--u)); } .inbuild-text { left: calc(30 * var(--u)); top: calc(51.56% + 163.27 * var(--u)); width: calc(270 * var(--u)); } .learn { left: calc(30 * var(--u)); top: calc(51.56% + 266.09 * var(--u)); padding-bottom: calc(1 * var(--u)); border-bottom-width: calc(1.5 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: calc(-0.48 * var(--u)); } .next { left: calc(30 * var(--u)); top: calc(51.56% + 362.4 * var(--u)); font-size: calc(16 * var(--u)); } .next .n { width: auto; margin-right: 0; } /* 8. Contact + footer */ .contact-media { height: 57.87%; } .contact-media::before { display: none; } .contact-media::after { left: 0; width: 100%; background: linear-gradient(319.35deg, transparent 27.27%, rgba(0, 0, 0, .7) 80.09%); } .shower { left: calc(30 * var(--u)); top: 14.91%; font-weight: 500; font-size: calc(36 * var(--u)); line-height: 1.1; letter-spacing: calc(-1.8 * var(--u)); color: var(--ink); } .pitch { left: calc(174 * var(--u)); top: 28.76%; width: calc(198 * var(--u)); font-size: calc(18 * var(--u)); letter-spacing: calc(-0.54 * var(--u)); } .btn { margin-top: calc(19.1 * var(--u)); width: calc(125 * var(--u)); height: calc(46 * var(--u)); font-size: calc(14 * var(--u)); letter-spacing: calc(-0.42 * var(--u)); } .site-footer { top: 0; } .logo-foot { left: calc(29.96 * var(--u)); top: 64.99%; gap: calc(9.631 * var(--u)); } .logo-foot .logo-mark { width: calc(47.02 * var(--u)); height: calc(47.02 * var(--u)); } .logo-foot .logo-word { font-size: calc(27.656 * var(--u)); letter-spacing: calc(-1.9359 * var(--u)); } .logo-foot .logo-word sup { font-size: calc(5.725 * var(--u)); } .social { left: calc(308.37 * var(--u)); top: 68.51%; gap: calc(23.48 * var(--u)); } .social .li { width: calc(20.73 * var(--u)); height: calc(20.01 * var(--u)); } .social .xx { width: calc(19.42 * var(--u)); height: calc(17.87 * var(--u)); } .contacts { left: calc(26.26 * var(--u)); top: 76.89%; display: flex; flex-direction: column; font-size: calc(16 * var(--u)); letter-spacing: calc(-0.48 * var(--u)); color: #fff; } .foot-rule { --at: 88.57%; } .owner { left: 0; right: 0; top: 91.24%; bottom: auto; text-align: center; font-size: calc(16 * var(--u)); letter-spacing: calc(-0.368 * var(--u)); } .legal { left: 0; right: 0; top: 94.14%; bottom: auto; display: block; text-align: center; font-size: calc(12 * var(--u)); line-height: 1.5; letter-spacing: calc(-0.36 * var(--u)); } .legal span { display: block; } }