/* ========================================================================== Sai Palm View — theme layer + all section styles. Load order matters: vendor.css (Bootstrap) must come first. ========================================================================== */ /* ===== theme ===== */ /* ========================================================================== Sai Palm View — Bootstrap 5.3 theme layer Loaded AFTER bootstrap.min.css. Retunes Bootstrap's own CSS variables so that stock Bootstrap classes (.text-primary, .btn, .accordion, .row, .container-fluid) already carry the Figma design tokens. Sections should reach for Bootstrap utilities first and only fall back to their own CSS for geometry Bootstrap cannot express. ========================================================================== */ :root { /* ---- The design unit ------------------------------------------------- The Figma frame is 1920 wide. --u is one Figma pixel. js/main.js sets it to clientWidth/1920 (exactly 1px at design width); this is the fallback. */ --u: calc(100vw / 1920); /* ---- Palette --------------------------------------------------------- */ --spv-cream: #fffded; --spv-paper: #f0ede9; --spv-gold: #a9834a; --spv-gold-line: #cfa854; --spv-ink: #595a5c; --spv-rule: #daccb1; --spv-overlay-paper: rgba(240, 237, 233, 0.69); /* ---- Bootstrap overrides --------------------------------------------- */ --bs-body-bg: var(--spv-cream); --bs-body-bg-rgb: 255, 253, 237; --bs-body-color: var(--spv-ink); --bs-body-color-rgb: 89, 90, 92; --bs-primary: var(--spv-gold); --bs-primary-rgb: 169, 131, 74; --bs-primary-text-emphasis: var(--spv-gold); --bs-link-color: var(--spv-gold); --bs-link-color-rgb: 169, 131, 74; --bs-link-hover-color: var(--spv-gold-line); --bs-link-hover-color-rgb: 207, 168, 84; --bs-border-color: var(--spv-rule); --bs-border-color-translucent: rgba(169, 131, 74, 0.2); --bs-font-sans-serif: "Inter", "Haas Grot Disp Trial", "Helvetica Neue", Arial, sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-weight: 400; --bs-body-line-height: 1.2; /* Design font stacks */ --spv-font-display: "Cormorant Garamond", "Canela Deck Trial", Georgia, serif; --spv-font-sans: var(--bs-font-sans-serif); --spv-font-script: "Fleur De Leah", "Snell Roundhand", cursive; /* Focus ring in the brand colour rather than Bootstrap blue */ --bs-focus-ring-color: rgba(169, 131, 74, 0.35); } /* -------------------------------------------------------------------------- Page shell -------------------------------------------------------------------------- */ /* Hold the scrollbar's 6px gutter open even while nothing is scrolling. Three things on this page hide the page scrollbar: the loading veil (html.spv-loading), Lenis's own lock (.lenis-stopped) and Bootstrap's modal and offcanvas. Without a reserved gutter each of those widens the layout by the scrollbar's width for as long as it is up and drops it back afterwards, and since the whole design is width-driven — full-bleed sections on w-100, everything else centred on the 1920 canvas — the page visibly jumps sideways on open and again on close. Bootstrap has its own answer (padding-right on to stand in for the scrollbar it removed), but it cannot reach here: main.js parks Lenis on show.bs.modal, .lenis-stopped takes the scrollbar away before Bootstrap measures it on the next line, so Bootstrap reads a width of 0 and pads nothing. Reserving the gutter in CSS settles it for all four cases at once and leaves Bootstrap correctly measuring 0. */ html { scrollbar-gutter: stable; } body { overflow-x: hidden; } img { display: block; max-width: 100%; } /* -------------------------------------------------------------------------- Containers — expressed through Bootstrap's own gutter variable. .container-fluid pads by --bs-gutter-x * .5 on each side, so a 280u gutter reproduces the design's 140px side margin at 1920. The footer uses 112px. -------------------------------------------------------------------------- */ .spv-gutter { --bs-gutter-x: calc(280 * var(--u)); } .spv-gutter-footer { --bs-gutter-x: calc(224 * var(--u)); } /* Rows inside a design container should not inherit the page gutter. */ .spv-gutter > .row, .spv-gutter-footer > .row { --bs-gutter-x: 0; } /* -------------------------------------------------------------------------- Type utilities — Bootstrap's .fs-1..6 scale does not reach the display sizes this design uses, so the Figma scale is exposed in the same spirit. .fs-d == N Figma px. -------------------------------------------------------------------------- */ .fs-d180 { font-size: calc(180 * var(--u)); } .fs-d110 { font-size: calc(110 * var(--u)); } .fs-d105 { font-size: calc(105 * var(--u)); } .fs-d93 { font-size: calc(93 * var(--u)); } .fs-d80 { font-size: calc(80 * var(--u)); } .fs-d79 { font-size: calc(79 * var(--u)); } .fs-d64 { font-size: calc(64 * var(--u)); } .fs-d58 { font-size: calc(58 * var(--u)); } .fs-d48 { font-size: calc(48 * var(--u)); } .fs-d44 { font-size: calc(44 * var(--u)); } .fs-d40 { font-size: calc(40 * var(--u)); } .fs-d38 { font-size: calc(38 * var(--u)); } .fs-d36 { font-size: calc(36 * var(--u)); } .fs-d32 { font-size: calc(32 * var(--u)); } .fs-d29 { font-size: calc(29.2 * var(--u)); } .fs-d28 { font-size: calc(28 * var(--u)); } .fs-d24 { font-size: calc(24 * var(--u)); } .fs-d22 { font-size: calc(22 * var(--u)); } .fs-d20 { font-size: calc(20 * var(--u)); } .fs-d18 { font-size: calc(18 * var(--u)); } .fs-d16 { font-size: calc(16 * var(--u)); } .fs-d14 { font-size: calc(14 * var(--u)); } /* Font families */ .ff-display { font-family: var(--spv-font-display); } .ff-sans { font-family: var(--spv-font-sans); } .ff-script { font-family: var(--spv-font-script); text-transform: lowercase; } /* Line heights Bootstrap does not ship. .lh-d == N Figma px of leading. */ .lh-d40 { line-height: calc(40 * var(--u)); } .lh-d36 { line-height: calc(36 * var(--u)); } .lh-d30 { line-height: calc(30 * var(--u)); } .lh-d115 { line-height: 1.15; } /* Letter-spacing used by the small caps labels */ .ls-wide { letter-spacing: 0.08em; } /* -------------------------------------------------------------------------- Brand components, themed through Bootstrap's component variables so the stock .btn / .accordion behaviour and markup still apply. -------------------------------------------------------------------------- */ /* Gold outline button — Figma 231x64, 2px #CFA854, 20px sans */ .btn-spv { --bs-btn-color: var(--spv-gold); --bs-btn-border-color: var(--spv-gold-line); --bs-btn-border-width: max(1px, calc(2 * var(--u))); --bs-btn-border-radius: 0; --bs-btn-hover-color: var(--spv-cream); --bs-btn-hover-bg: var(--spv-gold-line); --bs-btn-hover-border-color: var(--spv-gold-line); --bs-btn-active-color: var(--spv-cream); --bs-btn-active-bg: var(--spv-gold); --bs-btn-active-border-color: var(--spv-gold); --bs-btn-padding-x: calc(20 * var(--u)); --bs-btn-padding-y: calc(12 * var(--u)); --bs-btn-font-family: var(--spv-font-sans); --bs-btn-font-size: calc(20 * var(--u)); --bs-btn-line-height: 1.2; min-width: calc(231 * var(--u)); min-height: calc(64 * var(--u)); white-space: nowrap; transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease; } /* Accordion, retuned to the flat gold rules the design uses. */ .accordion-spv { --bs-accordion-bg: transparent; --bs-accordion-color: var(--spv-gold); --bs-accordion-border-color: var(--spv-rule); --bs-accordion-border-width: 0; --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-btn-padding-x: 0; --bs-accordion-btn-padding-y: calc(10 * var(--u)); --bs-accordion-btn-color: var(--spv-gold); --bs-accordion-btn-bg: transparent; --bs-accordion-btn-icon-width: 0; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-color: var(--spv-gold); --bs-accordion-active-bg: transparent; --bs-accordion-body-padding-x: 0; --bs-accordion-body-padding-y: calc(18 * var(--u)); } .accordion-spv .accordion-button { font-family: var(--spv-font-sans); font-size: calc(24 * var(--u)); text-transform: uppercase; letter-spacing: 0.02em; box-shadow: none; } /* The stock chevron is replaced by the design's +/- glyph. */ .accordion-spv .accordion-button::after { display: none; } .accordion-spv .accordion-item { border-bottom: max(1px, calc(1.2 * var(--u))) solid var(--spv-rule); } /* -------------------------------------------------------------------------- Section shell — the absolute-positioning canvas used where the design is a free composition rather than a flow layout. -------------------------------------------------------------------------- */ .sec { position: relative; width: 100%; overflow: hidden; isolation: isolate; } /* A full-bleed backdrop layer. Pair with Bootstrap's object-fit-cover. */ .layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* The cream paper wash that sits over most texture plates. */ .paper-wash::after { content: ""; position: absolute; inset: 0; background: var(--spv-overlay-paper); pointer-events: none; } /* -------------------------------------------------------------------------- "KNOW MORE" circle + arrow link, shared by five sections -------------------------------------------------------------------------- */ .know-more { position: relative; display: inline-block; height: calc(134 * var(--u)); cursor: pointer; } .know-more__circle { position: absolute; top: 0; height: calc(134 * var(--u)); width: calc(128 * var(--u)); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* Figma models the rule as a zero-height vector whose artwork bleeds out via inset(-3.68px -0.63%); the drawn box is 80.158 x 7.364. */ .know-more__rule { position: absolute; top: calc(63.32 * var(--u)); height: calc(7.364 * var(--u)); width: calc(80.158 * var(--u)); transform-origin: left center; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .know-more__rule > img { width: 100%; height: 100%; object-fit: contain; } .know-more__label { position: absolute; top: calc(55 * var(--u)); font-family: var(--spv-font-sans); font-size: calc(20 * var(--u)); line-height: 1.2; color: var(--spv-gold); white-space: nowrap; } .know-more:hover .know-more__circle { transform: translateX(calc(12 * var(--u))); } .know-more:hover .know-more__rule { transform: scaleX(1.18); } /* -------------------------------------------------------------------------- Motion primitives. Initial states apply only under .js-anim, which main.js adds to , so the page is fully visible without JS. -------------------------------------------------------------------------- */ .js-anim [data-anim] { will-change: transform, opacity; } .js-anim [data-anim="fade"] { opacity: 0; } .js-anim [data-anim="fade-up"] { opacity: 0; transform: translate3d(0, calc(48 * var(--u)), 0); } .js-anim [data-anim="slide-left"] { opacity: 0; transform: translate3d(calc(80 * var(--u)), 0, 0); } .js-anim [data-anim="slide-right"] { opacity: 0; transform: translate3d(calc(-80 * var(--u)), 0, 0); } .js-anim [data-anim="zoom-out"] { transform: scale(1.12); } .js-anim [data-anim="mask-up"] { clip-path: inset(100% 0 0 0); } .js-anim [data-anim="mask-down"] { clip-path: inset(0 0 100% 0); } .js-anim [data-anim="clip-reveal"] { clip-path: inset(0 100% 0 0); } .split-line { display: block; overflow: hidden; } .split-line__inner { display: block; } @media (prefers-reduced-motion: reduce) { .js-anim [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* -------------------------------------------------------------------------- Scrollbar + Lenis -------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--spv-cream); } ::-webkit-scrollbar-thumb { background: rgba(169, 131, 74, 0.45); border-radius: 3px; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* -------------------------------------------------------------------------- Responsive position utilities. Bootstrap 5.3 ships .position-* but NOT responsive variants of them, so a section that is absolutely positioned on desktop and in normal flow on mobile otherwise has to fight Bootstrap's !important with its own. These follow Bootstrap's own naming and specificity so sections can write `position-absolute position-lg-absolute` / `position-static` cleanly. -------------------------------------------------------------------------- */ @media (min-width: 576px) { .position-sm-static { position: static !important; } .position-sm-relative { position: relative !important; } .position-sm-absolute { position: absolute !important; } } @media (min-width: 768px) { .position-md-static { position: static !important; } .position-md-relative { position: relative !important; } .position-md-absolute { position: absolute !important; } } @media (min-width: 992px) { .position-lg-static { position: static !important; } .position-lg-relative { position: relative !important; } .position-lg-absolute { position: absolute !important; } } @media (min-width: 1200px) { .position-xl-static { position: static !important; } .position-xl-relative { position: relative !important; } .position-xl-absolute { position: absolute !important; } } /* Figma's plate opacities fall between Bootstrap's 25/50/75 steps. */ .opacity-15 { opacity: 0.15 !important; } .opacity-26 { opacity: 0.26 !important; } .opacity-39 { opacity: 0.39 !important; } .opacity-70 { opacity: 0.70 !important; } /* ===== section: hero ===== */ /* ========================================================================== HERO — Figma component set 249:712, settled frame 249:705 (Component 72) Layout is Bootstrap-driven; this file holds only the Figma coordinates, the fixed canvas height and the intro timeline's start states. ========================================================================== */ .sec--hero { height: calc(1080 * var(--u)); } /* ---- Backdrops ---------------------------------------------------------- */ /* Figma 249:680 / 249:681 sit at opacity 0 in the settled 8th frame. Declared here rather than with Bootstrap's .opacity-0, because that utility is !important and GSAP's inline styles could never animate past it. */ .sec--hero .hero__plate, .sec--hero .hero__foliage { opacity: 0; } /* Figma 249:681 "image 61": 1920x1152 at y=6 — 72px taller than the frame, which is the slack the opening zoom uses. */ .sec--hero .hero__foliage { top: calc(6 * var(--u)); height: calc(1152 * var(--u)); } /* ---- Navigation --------------------------------------------------------- */ /* One row on the masthead line (top 68, 41 tall), centred on the canvas between the brand at the left gutter and the developer mark at the right. The six labels measure ~497 together, so a 60px gap either side of each rule holds the row near the ~797 wide it occupied as two Figma groups. */ .spv-header .hero__nav { inset: 0; pointer-events: none; } .spv-header .hero__nav-group { position: absolute; transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1); top: calc(68 * var(--u)); left: 0; right: 0; height: calc(41 * var(--u)); gap: calc(60 * var(--u)); pointer-events: auto; } .spv-header .hero__nav-item { height: calc(41 * var(--u)); } /* Hairline rule between items — decorative, so it is drawn rather than marked up, and it sits in the middle of the gap it precedes. */ .spv-header .hero__nav-item + .hero__nav-item::before { content: ""; position: absolute; left: calc(-30 * var(--u)); top: 50%; width: max(1px, calc(1 * var(--u))); height: calc(22 * var(--u)); background: rgba(255, 255, 255, 0.45); transform: translateY(-50%); } .spv-header .hero__nav-link { line-height: calc(41 * var(--u)); position: relative; transition: color 0.35s ease, font-size 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* Gold underline on hover — the rule Figma draws under the active item. */ .spv-header .hero__nav-link::after { content: ""; position: absolute; left: 50%; bottom: calc(2 * var(--u)); width: 0; height: max(1px, calc(1.5 * var(--u))); background: var(--spv-gold-line); transform: translateX(-50%); transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .spv-header .hero__nav-link:hover, .spv-header .hero__nav-link:focus-visible { color: var(--spv-gold-line) !important; } .spv-header .hero__nav-link:hover::after, .spv-header .hero__nav-link:focus-visible::after { width: 100%; } /* ---- Developer mark ----------------------------------------------------- */ /* Paradise Group, on the right gutter — 86 in, mirroring the brand on the left. 220x63.5 (the artwork is 1400x404, so 220 wide lands on 63.5 tall), centred on the nav's own centre line at y=88.5. */ .spv-header .hero__partner { top: calc(56.75 * var(--u)); transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1); right: calc(86 * var(--u)); width: calc(220 * var(--u)); height: calc(63.5 * var(--u)); pointer-events: none; } /* ---- Logo --------------------------------------------------------------- */ /* Settled: the Figma artwork size, 67.633 x 138.47 inside a 64.455 x 138 clip (the clip is narrower than the artwork, exactly as Figma draws it), parked at the left gutter x=86 — the same gutter the sections below open on. */ .spv-header .hero__logo { top: calc(20 * var(--u)); transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1); left: calc(86 * var(--u)); width: calc(64.455 * var(--u)); height: calc(138 * var(--u)); overflow: hidden; } /* Both lockups sit in the same box and cross-fade; .hero__logo itself is left alone because the intro timeline owns its opacity and its transform. */ .spv-header .hero__logo > img { position: absolute; transition-property: width, height, opacity; transition-duration: 0.4s, 0.4s, 0.35s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); left: 50%; top: 50%; width: calc(67.633 * var(--u)); height: calc(138.47 * var(--u)); transform: translate(-50%, -50%); object-fit: contain; } /* ---- The fixed bar ------------------------------------------------------ The masthead is no longer part of the hero: it is a fixed bar the whole page scrolls under. Three states, all driven by js/main.js: (none) transparent, and laid out exactly as Figma draws the hero masthead — brand 138 tall at top 20, nav on the 68 line, developer mark in the right margin --scrolled (y>60) collapses to an 88 bar over a dark veil, because from here down the page runs cream and white type would vanish --hidden translated off the top edge while the visitor scrolls DOWN; removing it slides the bar back in --ready gates the transform transition. Without it the bar would animate in from -100% on the first paint of a page that loads already scrolled. Only the bar's own height is transitioned for the backdrop; the children are absolutely positioned, so their boxes move independently and the hero intro timeline's inline transform on .hero__logo is never fought over (the logo is resized through its box and its , not through a transform). */ .spv-header { height: calc(170 * var(--u)); z-index: 1030; /* above the page, below the offcanvas (1045) and modal (1055) */ pointer-events: none; /* the bar is mostly empty; the hero keeps its clicks */ transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* The veil is a child layer rather than a background, so it can cross-fade while the bar itself is sliding. */ .spv-header::before { content: ""; position: absolute; inset: 0; background: rgba(30, 22, 12, 0); transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .spv-header--ready { transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .spv-header--hidden { transform: translateY(-100%); } .spv-header--scrolled { height: calc(100 * var(--u)); } .spv-header--scrolled::before { background: rgba(30, 22, 12, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(207, 168, 84, 0.25); } /* Compact boxes — everything centres on the 50 line of the 100 bar. The brand is a TALL lockup (crest over wordmark over rule, 0.4884 wide to high), so the bar's height is really set by how big the logo has to be to stay readable: 88 of the 100 is the mark, and the 6 above and below is all the bar can spare. Both boxes keep Figma's clip, which is fractionally narrower than the artwork it holds — 64.455:67.633 wide, 138:138.47 high — so the settled proportions survive the 0.6377 reduction. The nav drops to 20 here. At the hero's 24 it out-shouted the brand once both were squeezed onto one line. */ .spv-header--scrolled .hero__logo { top: calc(6 * var(--u)); width: calc(41.1 * var(--u)); height: calc(88 * var(--u)); } .spv-header--scrolled .hero__logo > img { width: calc(43.1 * var(--u)); height: calc(88.3 * var(--u)); } .spv-header .hero__logo-light { opacity: 0; } .spv-header--scrolled .hero__logo-light { opacity: 1; } .spv-header--scrolled .hero__logo > img:not(.hero__logo-light) { opacity: 0; } .spv-header--scrolled .hero__nav-group { top: calc(29.5 * var(--u)); } .spv-header--scrolled .hero__nav-link { font-size: calc(20 * var(--u)); } .spv-header--scrolled .hero__partner { top: calc(27 * var(--u)); width: calc(159.4 * var(--u)); height: calc(46 * var(--u)); } /* The burger lives outside the bar (it has to outrank the offcanvas it closes), so main.js hands it the same hidden state to travel with. */ .spv-burger--hidden { transform: translateY(calc(-100% - 18px)); } @media (prefers-reduced-motion: reduce) { .spv-header, .spv-header--ready { transition: none; } } /* ---- Tagline ------------------------------------------------------------ */ /* Figma 249:702 — a 1622x127 clip at (149,953) holding the 80px line. */ .sec--hero .hero__tagline { left: calc(149 * var(--u)); top: calc(953 * var(--u)); width: calc(1622 * var(--u)); height: calc(127 * var(--u)); } .sec--hero .hero__tagline-text { /* Cormorant Garamond sets ~6% narrower than Canela Deck Thin at 80px, so the line is tracked out to hold Figma's 1532px measure inside the 1622 box. One line on desktop; the mobile block lets it wrap (Bootstrap's .text-nowrap is !important, so the nowrap lives here instead). */ white-space: nowrap; letter-spacing: 0.018em; padding-top: calc(15 * var(--u)); } /* ---- Intro timeline start states --------------------------------------- Only applied when JS is driving the sequence (.js-anim on ), so the settled frame above is what renders with JS off or reduced motion on. */ .js-anim .sec--hero .hero__tower, .js-anim .spv-header .hero__nav-group, .js-anim .spv-header .hero__partner, .js-anim .sec--hero .hero__tagline-text { opacity: 0; } .js-anim .sec--hero .hero__tagline-text { transform: translateY(100%); } @media (prefers-reduced-motion: reduce) { .js-anim .sec--hero .hero__tower, .js-anim .spv-header .hero__nav-group, .js-anim .spv-header .hero__partner, .js-anim .sec--hero .hero__tagline-text { opacity: 1; } .js-anim .sec--hero .hero__tagline-text { transform: none; } } /* ========================================================================== Mobile ========================================================================== */ @media (max-width: 991.98px) { .sec--hero { height: auto; min-height: 100svh; } /* Nav collapses to a centred row under the logo. */ /* The inline nav is desktop-only; on mobile the hamburger + offcanvas carry the menu, so the row is removed rather than squeezed in. */ .spv-header .hero__nav { display: none; } .spv-header .hero__nav-link { font-size: 13px; line-height: 1.6; } /* Settled mobile position: a header — logo top-left, burger top-right. The intro still shows the big logo on the centre line, then flies it here. */ .spv-header .hero__logo { top: 16px; left: 16px; width: 44px; height: 92px; } .spv-header .hero__logo > img { width: 46px; height: 94px; } /* Tucked in beside the burger: 16px gutter + the 48px control + a 12px channel. Centred on the burger's own centre line (18 + 24 = 42). */ .spv-header .hero__partner { top: 26px; right: 76px; width: 110px; height: 32px; } /* The bar in px rather than --u: below 992 the masthead is a real header (logo top-left, mark and burger top-right), not a scaled Figma frame. Both states centre on the burger's own centre line, 42 from the top. */ .spv-header { height: 112px; } .spv-header--scrolled { height: 88px; } .spv-header--scrolled .hero__logo { top: 4px; width: 36px; height: 76px; } .spv-header--scrolled .hero__logo > img { width: 38px; height: 77px; } .spv-header--scrolled .hero__partner { top: 27px; right: 76px; width: 103px; height: 30px; } .sec--hero .hero__tagline { left: 16px; right: 16px; top: auto; bottom: 96px; width: auto; height: auto; } .sec--hero .hero__tagline-text { font-size: 24px; line-height: 1.25; white-space: normal; letter-spacing: 0.01em; padding-top: 0; } .sec--hero .hero__foliage { top: auto; bottom: 0; height: 62%; } } /* ===== section: arrival ===== */ /* ========================================================================== Sai Palm View — 02 THE GRAND ARRIVAL Figma node 282:1206 (Component 75), page offset y = 1080, box 1920x1080. Coordinates below are Figma px relative to the section origin, i.e. the full-page y minus 1080, expressed through the --u scaling unit. Figma saved this node MID-ANIMATION. The settled master (Figma 249:902 "Component 11") supplies the on-stage geometry used here: photo x=86 y=80 932x752 (parked off-stage at x=-946) copy col x=1099 y=137 733x558 (parked off-stage at x=1929) stats row x=213 y=909 1493x58 (clipped to h=9px / h=1px) Bootstrap now carries the layout: the split is `row`/`col-*`, the stat line and each stat are `d-flex`, plates use position/size/object-fit/z utilities. What stays here is what Bootstrap has no vocabulary for — the fixed section height, the Figma coordinates, the plates' inner geometry and opacities, and the commented font-substitution compensations. ========================================================================== */ /* Fixed 1080-tall canvas — Bootstrap has no height scale at this size. The cream fill comes from Bootstrap's .bg-body. */ .sec--arrival { height: calc(1080 * var(--u)); } /* -------------------------------------------------------------------------- Background plates — exact Figma boxes and the plates' own inner geometry -------------------------------------------------------------------------- */ /* Paper texture: 1920x1782 centred on the 1080 band (top -351). .paper-wash supplies the rgba(240,237,233,0.69) overlay on top. */ .sec--arrival .arr__paper { top: calc(-351 * var(--u)); height: calc(1782 * var(--u)); } /* Figma insets the texture inside its frame by 0.03% / 99.93% and runs it at 70%. */ .sec--arrival .arr__paper-img { top: 0.03%; height: 99.93%; opacity: 0.7; } /* Flamingo illustration — 407x611 at (1629, 537), bleeds past the right edge */ .sec--arrival .arr__flamingo { left: calc(1629 * var(--u)); top: calc(537 * var(--u)); width: calc(407 * var(--u)); height: calc(611 * var(--u)); opacity: 0.39; } /* Palm-shadow border plate — 1946x832 box, source scaled to 114.64% x 178.93% */ .sec--arrival .arr__palm { width: calc(1946 * var(--u)); height: calc(832 * var(--u)); opacity: 0.15; } .sec--arrival .arr__palm-img { width: 114.64%; height: 178.93%; max-width: none; /* the plate is deliberately larger than its frame */ } /* -------------------------------------------------------------------------- The two-column split — Bootstrap row; only the Figma origin and the column widths live here. 86 + 932 + 81 (free space) + 733 = 1832 = the copy's right edge, so justify-content-between reproduces Figma's 81px channel exactly. -------------------------------------------------------------------------- */ .sec--arrival .arr__split { left: calc(86 * var(--u)); top: calc(80 * var(--u)); width: calc(1746 * var(--u)); } /* Hero photograph — settled on-stage (Figma parked it at left:-946px) */ .sec--arrival .arr__photo { width: calc(932 * var(--u)); height: calc(752 * var(--u)); background: #fafafa; /* the Figma rectangle's own fill, behind the photo */ } /* Figma 282:1138 is a video fill (the tower lighting up). The element fills the plate like the image did; Bootstrap's object-fit-cover applies to