/* ========================================================================== ONE HILL MEDIA — page composition. Section padding, grids and one-off treatments transcribed from the inline styles in "One Media Website.dc.html", plus the hero scroll-sequence shell that replaces the original still hero. ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} /* `clip` keeps the off-canvas nav drawer from ever producing a horizontal scrollbar without turning into a scroll container, which would break the sticky hero stage the way `overflow-x:hidden` does. */ body{background:var(--navy-800);font-family:var(--font-sans);color:var(--alpha-white-72);overflow-x:hidden;overflow-x:clip} a{color:var(--mustard-500)} a:hover{color:var(--mustard-400)} .om-page{background:var(--navy-800)} .om-shell{max-width:var(--width-content);margin:0 auto} .om-shell--wide{max-width:var(--width-max)} .om-shell--mid{max-width:1080px} .om-shell--narrow{max-width:900px} /* skip link */ .om-skip{ position:absolute;left:-9999px;top:0;z-index:200; padding:var(--space-3) var(--space-6);background:var(--accent);color:var(--text-on-accent); font-size:12px;letter-spacing:var(--ls-button);text-transform:uppercase; } .om-skip:focus{left:var(--space-4);top:var(--space-4)} /* fixed header shell (z-index 60, as in the source page) */ .om-header{position:fixed;top:0;left:0;right:0;z-index:60} /* --- Section scaffolding ------------------------------------------------- */ .om-section{padding:var(--space-32) var(--space-12)} .om-section--services{padding:var(--space-24) var(--space-12) var(--space-32)} .om-section--dark{background:var(--navy-900)} .om-section__head{ display:flex;flex-direction:column;align-items:center;gap:var(--space-6);margin-bottom:72px; } /* a long display word must never widen the shell past the viewport */ .om-section__head > *{max-width:100%;min-width:0} .om-heading{max-width:100%;overflow-wrap:break-word} .om-section__head--tight{margin-bottom:var(--space-16)} .om-section__head--loose{margin-bottom:80px} .om-section__head--book{margin-bottom:56px} .om-section__head--work{margin-bottom:var(--space-12)} .om-lede{ text-align:center;max-width:700px; font-weight:var(--fw-light);font-size:16px;line-height:1.7; color:var(--alpha-white-55);text-wrap:pretty; } .om-lede--narrow{max-width:640px} /* --- Hero: scroll-driven frame sequence --------------------------------- * * Replaces the original still-image Hero. The track is tall; the viewport * inside it is sticky, and scroll progress through the track drives which * frame of the 97-frame sequence is painted onto the canvas. * ----------------------------------------------------------------------- */ /* Track height sets how much scrolling the 97-frame sequence costs: the animation spans (height - 100vh), so 200vh = roughly one screen of scroll from foundation to finished house. */ .om-hero{position:relative;height:200vh;background:#0B0B0C} .om-hero__stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0B0B0C} .om-hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* Stage layering: image (0) → atmospheric overlays (1) → copy (2) → rail (3). Without this the bottom fade, being last in the DOM, paints over the CTAs and dims the gold. */ .om-hero__vignette, .om-hero__scrim, .om-hero__fade{z-index:1} .om-hero__copy, .om-hero__hint{z-index:2} .om-hero__rail{z-index:3} .om-hero__vignette{ position:absolute;inset:0;pointer-events:none; background:radial-gradient(125% 90% at 50% 45%,rgba(11,11,12,0) 42%,rgba(11,11,12,.5) 100%); } /* left scrim carries the hero copy, matching the design system Hero */ .om-hero__scrim{position:absolute;inset:0;pointer-events:none;background:var(--scrim-hero)} /* How far the bottom-anchored copy drops toward the driveway in the frame. Clamped below so the CTA pair can never be pushed off the viewport. */ :root{--hero-copy-drop:200px} .om-hero__copy{ position:absolute;inset:0; max-width:var(--width-content);margin:0 auto; padding:0 var(--space-12) max(var(--space-8), calc(var(--space-24) - var(--hero-copy-drop))); display:flex;flex-direction:column;justify-content:flex-end; will-change:opacity,transform; } /* The copy resolves over the finished house at the end of the sequence — hero-scroll.js drives opacity/transform from scroll progress, so it starts hidden only once JS is running. Without JS it simply stays visible. */ html.js .om-hero__copy{opacity:0} .om-hero__eyebrow{ font-size:var(--text-micro);font-weight:var(--fw-semibold); letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--accent);margin-bottom:var(--space-6); } .om-hero__title{ font-family:var(--font-display);font-size:var(--text-hero);font-weight:var(--fw-regular); line-height:var(--lh-display);letter-spacing:var(--ls-display); color:var(--text-display);margin:0; } .om-hero__title em{display:block;font-style:italic;color:var(--accent)} .om-hero__sub{ margin-top:var(--space-4);max-width:60ch; font-size:var(--text-lg);font-weight:var(--fw-light);color:var(--text-body); } .om-hero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-8);flex-wrap:wrap;pointer-events:auto} /* progress rail from the source animation */ .om-hero__rail{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(242,238,233,.10)} .om-hero__fill{height:2px;width:0;background:rgba(242,238,233,.85)} /* fade the sequence into the page background */ .om-hero__fade{ position:absolute;left:0;right:0;bottom:0;height:220px;pointer-events:none; background:linear-gradient(to bottom,rgba(16,22,28,0),var(--navy-800)); } .om-hero__hint{ position:absolute;bottom:var(--space-8);left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:var(--space-2); font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--text-disabled);pointer-events:none; transition:opacity var(--dur-normal) var(--ease-silk); } .om-hero__hint span{width:1px;height:28px;background:var(--alpha-white-28)} /* --- Services ----------------------------------------------------------- */ /* auto-fit handles the narrow end. Left alone at the wide end it resolves to four columns — 4*300 + 3*24 = 1272, which clears the 1280 shell by 8px — and the six cards land as 4 + 2 with a widowed second row. Pinning three above the 1100 breakpoint gives two even rows and leaves the smaller sizes as they were. Keep this in step with the 1100 max-width block below. */ .om-services__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6)} @media (min-width:1101px){ .om-services__grid{grid-template-columns:repeat(3,minmax(0,1fr))} } .om-services__cell{display:flex;flex-direction:column;gap:20px} .om-services__note{ margin:0;font-weight:var(--fw-light);font-size:14px;line-height:1.7;color:var(--alpha-white-55); } /* --- Why (divided feature grid) ---------------------------------------- * * The source hard-coded a border on each cell for a 3-across layout, which * leaves gaps once auto-fit resolves to 4 columns. Drawing the rules with a * 1px grid gap over a hairline-coloured backdrop gives the same divided look * at any column count. * ----------------------------------------------------------------------- */ .om-why__grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); border:1px solid var(--border-hairline); gap:1px;background:var(--border-hairline); } .om-why__cell{background:var(--navy-900)} /* --- About / founder profile -------------------------------------------- */ .om-about{ display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); gap:var(--space-16);align-items:center; } .om-about__portrait{position:relative;isolation:isolate} .om-about__portrait img{ position:relative;z-index:1; width:100%;height:auto;display:block; border:1px solid var(--border-hairline); border-radius:var(--radius-xs); } /* gold hairline offset behind the portrait, echoing the media-card frames */ .om-about__portrait::after{ content:"";position:absolute;inset:0;z-index:0; border:1px solid var(--border-accent); transform:translate(14px,14px); pointer-events:none; } .om-heading--start{text-align:left;text-wrap:pretty} .om-about__body{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start} .om-about__text{ font-weight:var(--fw-light);font-size:15px;line-height:1.8; color:var(--alpha-white-55);max-width:62ch; } .om-about__creds{ display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:1px;background:var(--border-hairline); border:1px solid var(--border-hairline);width:100%;margin-top:var(--space-2); } .om-about__cred{ background:var(--navy-800);padding:var(--space-4) var(--space-6); font-weight:var(--fw-light);font-size:12px;line-height:1.6;color:var(--alpha-white-55); } .om-about__cred strong{ display:block;margin-bottom:4px; font-family:var(--font-display);font-weight:var(--fw-regular); font-size:19px;line-height:1.15;color:var(--text-display);text-wrap:nowrap; } .om-about__links{display:flex;flex-wrap:wrap;gap:var(--space-8)} /* --- Process timeline --------------------------------------------------- */ .om-process{position:relative} .om-process__rail{ position:absolute;left:50%;top:0;bottom:0;width:1px; background:rgba(198,151,76,.35); transform:scaleY(0);transform-origin:top; transition:transform 1.6s var(--ease-silk); } .om-process__rail.is-drawn{transform:scaleY(1)} /* --- Packages ---------------------------------------------------------- */ .om-packages__grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-6);align-items:stretch; } /* --- Guarantee band ----------------------------------------------------- */ .om-guarantee{ margin-top:var(--space-12); display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;background:var(--border-hairline); border:1px solid var(--border-hairline); } .om-guarantee__item{ display:flex;align-items:flex-start;gap:var(--space-3); padding:var(--space-6);background:var(--navy-900); font-weight:var(--fw-light);font-size:13px;line-height:1.7;color:var(--alpha-white-55); } .om-guarantee__item .om-icon{width:16px;height:16px;color:var(--accent);margin-top:4px} .om-guarantee__item strong{ display:block;margin-bottom:4px; font-weight:var(--fw-semibold);font-size:11px; letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent); } /* --- À la carte price list ---------------------------------------------- */ .om-alacarte{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-12); } .om-alacarte__title{ font-family:var(--font-sans);font-size:11px;font-weight:var(--fw-semibold); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent); margin:0 0 var(--space-4);padding-bottom:var(--space-3); border-bottom:1px solid var(--border-accent); } .om-alacarte__list{list-style:none;margin:0;padding:0} /* The padding lives on the toggle, not the row, so the whole line is the hit area. Only the un-priced "Included" row keeps its own padding. */ .om-alacarte__row{ display:flex;align-items:baseline;gap:var(--space-3); padding:0;border-bottom:1px solid var(--border-hairline); } .om-alacarte__row.is-free{padding:14px 0} .om-alacarte__toggle{ flex:1;display:flex;align-items:baseline;gap:var(--space-3); width:100%;margin:0;padding:14px 0; font:inherit;color:inherit;text-align:left;cursor:pointer; background:none;border:0; transition:padding-left var(--dur-fast) var(--ease-silk); } .om-alacarte__toggle:hover{padding-left:var(--space-2)} .om-alacarte__toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .om-alacarte__mark{ flex:0 0 auto;align-self:center;width:15px;height:15px; color:var(--text-muted);transition:color var(--dur-fast) var(--ease-silk); } .om-alacarte__toggle:hover .om-alacarte__mark{color:var(--accent)} .om-alacarte__row.is-selected .om-alacarte__name, .om-alacarte__row.is-selected .om-alacarte__price{color:var(--text-display)} .om-alacarte__row.is-selected .om-alacarte__mark{color:var(--accent)} .om-alacarte__name{ flex:1;font-weight:var(--fw-light);font-size:14px;line-height:1.5;color:var(--alpha-white-72); } .om-alacarte__price{ font-family:var(--font-display);font-size:20px;color:var(--text-display);white-space:nowrap; } /* the one line the competition charges for */ .om-alacarte__row.is-free .om-alacarte__price{ font-family:var(--font-sans);font-size:11px;font-weight:var(--fw-semibold); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent); } .om-alacarte__row.is-flagship .om-alacarte__name{color:var(--text-display)} .om-alacarte__row.is-flagship .om-alacarte__price{color:var(--accent)} .om-alacarte__foot{ margin:var(--space-12) auto 0;max-width:var(--width-reading);text-align:center; font-weight:var(--fw-light);font-size:13px;line-height:1.8;color:var(--alpha-white-55); } /* Running tally. Sticks to the bottom of the viewport while the visitor is inside the price list, so the count is never off-screen mid-selection. */ .om-alacarte__bar{ position:sticky;bottom:var(--space-6);z-index:20; margin:var(--space-12) auto 0;max-width:520px; display:flex;align-items:center;justify-content:space-between;gap:var(--space-6); padding:var(--space-3) var(--space-3) var(--space-3) var(--space-6); background:var(--surface-raised); border:1px solid var(--border-accent);border-radius:var(--radius-xs); box-shadow:var(--shadow-hover); } .om-alacarte__barText{display:flex;flex-direction:column;gap:2px} .om-alacarte__barText strong{ font-family:var(--font-sans);font-size:10px;font-weight:var(--fw-semibold); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent); } .om-alacarte__barText span{ font-family:var(--font-display);font-size:18px;color:var(--text-display); } /* --- Booking: track switch, à la carte chips ---------------------------- */ .om-book__modes{ display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3); margin-bottom:var(--space-8); } .om-book__mode{ display:flex;flex-direction:column;align-items:flex-start;gap:4px; padding:var(--space-4) var(--space-6);text-align:left;cursor:pointer; background:var(--surface-card); border:1px solid var(--border-hairline);border-radius:var(--radius-xs); transition:border-color var(--dur-fast) var(--ease-silk), background var(--dur-fast) var(--ease-silk); } .om-book__mode:hover{border-color:var(--border-accent)} .om-book__mode.is-current{border-color:var(--border-accent);background:var(--surface-raised)} .om-book__modeName{ font-family:var(--font-sans);font-size:12px;font-weight:var(--fw-semibold); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-body); } .om-book__mode.is-current .om-book__modeName{color:var(--accent)} .om-book__modeNote{font-size:12px;font-weight:var(--fw-light);color:var(--alpha-white-55)} .om-pkgpick__unit{ margin-left:6px;font-family:var(--font-sans);font-size:12px; font-weight:var(--fw-light);color:var(--text-muted); } .om-taggroup__count{margin-left:var(--space-2);color:var(--accent)} .om-extras{display:flex;flex-wrap:wrap;gap:var(--space-2)} .om-extras__empty{ margin:0;font-weight:var(--fw-light);font-size:13px;color:var(--alpha-white-55); } .om-extras__empty a{color:var(--accent)} .om-extra{ display:inline-flex;align-items:center;gap:var(--space-2); padding:5px 5px 5px var(--space-3); background:var(--surface-card); border:1px solid var(--border-hairline);border-radius:var(--radius-xs); font-size:13px;font-weight:var(--fw-light);color:var(--alpha-white-72); } .om-extra__price{font-family:var(--font-display);font-size:15px;color:var(--text-display)} /* already covered by the chosen package — kept visible, but not charged */ .om-extra.is-included{border-style:dashed} .om-extra.is-included .om-extra__price{ font-family:var(--font-sans);font-size:10px;font-weight:var(--fw-semibold); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent); } .om-extra__x{ flex:0 0 auto;width:22px;height:22px; display:inline-flex;align-items:center;justify-content:center; padding:0;background:none;border:0;border-radius:var(--radius-xs); color:var(--text-muted);cursor:pointer; transition:color var(--dur-micro) var(--ease-silk), background var(--dur-micro) var(--ease-silk); } .om-extra__x:hover{color:var(--accent);background:var(--accent-soft)} .om-extra__x .om-icon{width:11px;height:11px} /* --- Selected work ----------------------------------------------------- */ .om-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:var(--space-12)} .om-work__grid{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:210px;gap:var(--space-4); } .om-tile{ position:relative;margin:0;overflow:hidden; border:1px solid var(--border-hairline);background:var(--navy-900); transition:border-color var(--dur-fast) var(--ease-silk); } .om-tile:hover{border-color:var(--border-accent)} .om-tile--w2{grid-column:span 2} .om-tile--h2{grid-row:span 2} .om-tile__media{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:scale(1);transition:transform var(--dur-section) var(--ease-air); } .om-tile:hover .om-tile__media{transform:scale(var(--hover-scale-image))} .om-tile__scrim{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(11,15,22,.82) 0%,rgba(11,15,22,0) 55%); } .om-tile__cap{position:absolute;left:20px;right:20px;bottom:18px;pointer-events:none} .om-tile__title{font-family:var(--font-display);font-size:20px;color:var(--white)} .om-tile__meta{ margin-top:6px;font-size:10px;letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--accent); } .om-tile__hit{position:absolute;inset:0;border:0;background:transparent;cursor:pointer} /* --- Case-study modal -------------------------------------------------- */ .om-modal{ position:fixed;inset:0;z-index:200; background:rgba(8,11,16,.82); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); display:flex;align-items:center;justify-content:center;padding:var(--space-12); } .om-modal[hidden]{display:none} .om-modal__backdrop{position:absolute;inset:0;border:0;background:transparent;cursor:default} .om-modal__panel{ position:relative;width:100%;max-width:1180px;max-height:86vh;overflow-y:auto; background:var(--navy-700);border:1px solid var(--border-hairline); box-shadow:0 40px 120px rgba(0,0,0,.6); } .om-modal__media{position:relative;height:420px;background:var(--navy-900)} .om-modal__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .om-modal__mediascrim{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(20,27,38,.9) 0%,rgba(20,27,38,0) 60%); } .om-modal__close{position:absolute;top:20px;right:20px} .om-modal__body{ padding:var(--space-12);display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-12); } .om-modal__copy{display:flex;flex-direction:column;gap:20px} .om-modal__meta{font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent)} .om-modal__title{ margin:0;font-family:var(--font-display);font-weight:var(--fw-regular); font-size:42px;line-height:1.1;letter-spacing:var(--ls-display);color:var(--white); } .om-modal__text{ margin:0;font-weight:var(--fw-light);font-size:15px;line-height:1.8; color:var(--alpha-white-72);max-width:60ch;text-wrap:pretty; } .om-modal__stats{ display:flex;flex-wrap:wrap;gap:var(--space-8); padding-top:var(--space-3);border-top:1px solid var(--border-hairline); } .om-modal__statvalue{font-family:var(--font-display);font-size:28px;color:var(--accent)} .om-modal__statlabel{ margin-top:4px;font-size:10px;letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--alpha-white-55); } .om-modal__actions{display:flex;gap:var(--space-4);margin-top:var(--space-2);flex-wrap:wrap} .om-modal__gallery{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:var(--space-3)} .om-modal__gallery figure{position:relative;margin:0;overflow:hidden;background:var(--navy-900);border:1px solid var(--border-hairline)} .om-modal__gallery figure:first-child{grid-column:span 2} .om-modal__gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* --- Testimonials ------------------------------------------------------ */ .om-voices{display:flex;flex-direction:column;align-items:center;gap:40px} .om-voices__stage{width:100%;min-height:260px} .om-voices__dots{display:flex;gap:10px} .om-voices__dot{ width:8px;height:2px;border:0;padding:0;cursor:pointer; background:var(--alpha-white-28);transition:all var(--dur-fast) var(--ease-silk); } .om-voices__dot.is-active{width:28px;background:var(--accent)} /* --- FAQ -------------------------------------------------------------- */ .om-faq__search{max-width:420px;margin:0 auto var(--space-12)} .om-faq__empty{padding:var(--space-8) 0;font-weight:var(--fw-light);color:var(--alpha-white-55)} /* --- Booking wizard --------------------------------------------------- */ .om-book__panel{background:var(--navy-700);border:1px solid var(--border-hairline);padding:var(--space-12)} .om-book__progress{margin-bottom:var(--space-3)} .om-book__chips{ display:flex;flex-wrap:wrap;gap:var(--space-6); padding-bottom:var(--space-8);border-bottom:1px solid var(--border-hairline); } .om-book__chip{ font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--text-disabled);transition:color var(--dur-fast) var(--ease-silk); } .om-book__chip.is-done{color:var(--alpha-white-72)} .om-book__chip.is-current{color:var(--accent)} .om-step-panel{padding-top:40px} .om-step-panel[hidden]{display:none} /* step 1 — package choice */ .om-book__pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)} .om-pkgpick{padding:28px;cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit} .om-pkgpick__name{font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent)} .om-pkgpick__price{margin-top:14px;font-family:var(--font-display);font-size:34px;color:var(--white)} .om-pkgpick__blurb{margin:12px 0 0;font-weight:var(--fw-light);font-size:13px;line-height:1.7;color:var(--alpha-white-55)} .om-pkgpick__deposit{margin-top:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--alpha-white-72)} /* step 2 — date + arrival window */ .om-book__when{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px} .om-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)} .om-cal__month{font-family:var(--font-display);font-size:22px;color:var(--white)} .om-cal__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:10px} .om-cal__weekdays div{ text-align:center;font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--text-disabled); } .om-cal__days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .om-cal__day{ height:42px;border:1px solid var(--border-hairline);background:transparent; color:var(--alpha-white-72);font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-light); cursor:pointer;border-radius:var(--radius-xs);transition:all var(--dur-fast) var(--ease-silk); } .om-cal__day:hover:not(:disabled){border-color:var(--border-accent);color:var(--accent)} .om-cal__day:disabled{color:var(--text-disabled);cursor:default} .om-cal__day.is-empty{border-color:transparent;cursor:default} .om-cal__day.is-selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .om-slots__label{ font-size:11px;letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--alpha-white-55);margin-bottom:20px; } .om-slots__list{display:flex;flex-direction:column;gap:10px} .om-slot{ display:flex;justify-content:space-between;align-items:center;gap:var(--space-4); padding:16px 20px;border:1px solid var(--border-hairline);background:transparent; color:var(--alpha-white-72);font-family:var(--font-sans);font-size:14px;font-weight:var(--fw-light); cursor:pointer;border-radius:var(--radius-xs);transition:all var(--dur-fast) var(--ease-silk); text-align:left; } .om-slot:hover{border-color:var(--border-accent)} .om-slot.is-selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .om-slot__note{font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.6} /* steps 3 + 4 — questionnaire and contact */ .om-book__form{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-8) var(--space-12)} .om-book__form--wide{gap:var(--space-8) var(--space-12)} .om-span-all{grid-column:1/-1} .om-book__checks{display:flex;flex-wrap:wrap;gap:var(--space-8)} /* step 5 — confirm */ .om-book__confirm{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-12)} .om-summary__label{ font-size:11px;letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--alpha-white-55);margin-bottom:var(--space-6); } .om-summary__rows{display:flex;flex-direction:column} .om-summary__row{ display:flex;justify-content:space-between;gap:var(--space-6); padding:14px 0;border-bottom:1px solid var(--border-hairline); } .om-summary__k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--alpha-white-55)} .om-summary__v{font-weight:var(--fw-light);font-size:14px;color:var(--white);text-align:right} .om-deposit{ background:var(--navy-800);border:1px solid rgba(198,151,76,.4); box-shadow:0 0 48px rgba(198,151,76,.18); padding:36px;display:flex;flex-direction:column;gap:18px; } .om-deposit__label{font-size:10px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent)} .om-deposit__amount{font-family:var(--font-display);font-size:56px;line-height:1;color:var(--white)} .om-deposit__note{margin:0;font-weight:var(--fw-light);font-size:13px;line-height:1.7;color:var(--alpha-white-55)} .om-deposit__done{ display:flex;align-items:center;gap:var(--space-3);padding:18px; border:1px solid rgba(198,151,76,.4);color:var(--accent); font-size:11px;letter-spacing:.18em;text-transform:uppercase; } .om-deposit__done .om-icon{width:20px;height:20px} /* Submit failures and validation gaps. Deliberately not styled as a soft notice — if a booking did not send, the visitor needs to notice. */ .om-deposit__error{ margin:var(--space-4) 0 0;padding:var(--space-3) var(--space-4); border:1px solid var(--border-accent);border-left-width:3px; background:var(--accent-soft); font-weight:var(--fw-light);font-size:13px;line-height:1.6;color:var(--text-body); } .om-book__nav{ display:flex;justify-content:space-between;gap:var(--space-4); margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--border-hairline); } .om-book__foot{ margin:var(--space-8) auto 0;max-width:520px;text-align:center; font-weight:var(--fw-light);font-size:13px;line-height:1.8;color:var(--alpha-white-55); } /* --- Scroll reveals ---------------------------------------------------- */ [data-reveal]{ opacity:0;transform:translateY(28px); transition:opacity .9s var(--ease-silk),transform .9s var(--ease-silk); } [data-reveal].is-visible{opacity:1;transform:none} .no-js [data-reveal]{opacity:1;transform:none} /* --- Image placeholder ------------------------------------------------- * * The eight project photographs live in assets/imagery/. Any image that * has not been supplied yet falls back to a branded panel instead of a * broken-image icon; drop the real file in and it takes over with no * markup change. See site/assets/imagery/README.md. * ---------------------------------------------------------------------- */ .om-img{background:var(--navy-900)} .om-img.is-missing{ background: linear-gradient(135deg,rgba(198,151,76,.10),rgba(198,151,76,0) 55%), var(--navy-700); position:relative; } .om-img.is-missing::after{ content:attr(data-placeholder); position:absolute;inset:0;display:flex;align-items:center;justify-content:center; padding:var(--space-6);text-align:center; font-family:var(--font-sans);font-size:10px;font-weight:var(--fw-semibold); letter-spacing:var(--ls-label);text-transform:uppercase; color:var(--alpha-gold-40); } /* the CTA banner carries its own headline — a caption would collide with it */ .om-cta.om-img.is-missing::after{content:none} /* --- Responsive -------------------------------------------------------- */ @media (max-width:1100px){ :root{--text-hero:60px;--text-section:44px;--text-subsection:34px} .om-work__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .om-footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-8)} .om-why__cell{border-right-color:var(--border-hairline)!important;border-bottom-color:var(--border-hairline)!important} } /* The nav drawer takes over well above the general mobile breakpoint. Laid out in a row the header needs logo + 791 of links + the CTA + gaps and padding, which is about 1162px; below that the CTA is pushed off the right edge and only `overflow-x:clip` on the body hides it. So the burger owns everything under 1180 while the typography and spacing below stay on 860. */ @media (max-width:1180px){ .om-nav__links{ position:fixed;top:0;right:0;bottom:0;width:min(320px,82vw); flex-direction:column;align-items:flex-start;justify-content:center; gap:var(--space-6);padding:var(--space-12); background:var(--navy-900);border-left:1px solid var(--border-hairline); transform:translateX(100%);transition:transform var(--dur-fast) var(--ease-silk); z-index:70; } .om-nav__links.is-open{transform:none} .om-nav__link{font-size:14px} .om-nav__burger{display:inline-flex;position:relative;z-index:80} .om-nav__cta{display:none} } @media (max-width:860px){ :root{ --space-12:24px;--space-32:80px;--space-24:64px; --text-section:34px;--text-subsection:28px;--text-card-title:24px;--text-lg:18px; } .om-hero{height:170vh} .om-hero__title{font-size:clamp(38px,11vw,60px)} .om-hero__sub{font-size:16px} .om-hero__actions .om-btn{flex:1 1 100%} .om-about{grid-template-columns:1fr;gap:var(--space-12)} .om-about__portrait{max-width:340px} .om-about__portrait::after{transform:translate(10px,10px)} .om-step{grid-template-columns:24px 1fr;gap:var(--space-4)} .om-step__rail{grid-row:1;grid-column:1} .om-step__text,.om-step--left .om-step__text{grid-row:1;grid-column:2;text-align:left} .om-step--left .om-step__body{margin-left:0} .om-step__empty{display:none} .om-process__rail{left:11px} .om-work__grid{grid-template-columns:1fr;grid-auto-rows:220px} .om-tile--w2,.om-tile--h2{grid-column:span 1;grid-row:span 1} .om-modal{padding:var(--space-4)} .om-modal__media{height:240px} .om-modal__body{padding:var(--space-6)} .om-modal__title{font-size:30px} .om-book__panel{padding:var(--space-6)} .om-book__when{gap:var(--space-12)} .om-book__chips{gap:var(--space-3)} .om-deposit{padding:var(--space-6)} .om-deposit__amount{font-size:44px} .om-footer__grid{grid-template-columns:1fr} .om-footer__bar{gap:var(--space-6)} } @media (max-width:520px){ :root{--text-section:28px;--text-subsection:24px;--text-card-title:21px} .om-service{height:380px} .om-book__nav{flex-direction:column-reverse} .om-book__nav .om-btn{width:100%} .om-book__modes{grid-template-columns:1fr} .om-alacarte__bar{ margin-left:0;margin-right:0;bottom:var(--space-4); padding:var(--space-3);gap:var(--space-3); } .om-alacarte__bar .om-btn{flex:0 0 auto} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} [data-reveal]{opacity:1;transform:none;transition:none} .om-process__rail{transform:scaleY(1)} } /* ========================================================================== FPV TOUR (#tour) Base rules below are the static, no-JS, reduced-motion layout: a plain stacked list of frame + text. `js/fpv-tour.js` adds `.is-live`, which lifts the same markup into the sticky scroll flight. Progressive enhancement, so the section is readable and crawlable with the script blocked. ========================================================================== */ /* --- static / no-JS baseline -------------------------------------------- */ .om-fpv{background:var(--navy-900);padding:var(--space-32) var(--space-12)} .om-fpv__stage{max-width:var(--width-content);margin:0 auto;position:relative} .om-fpv__canvas, .om-fpv__scrim, .om-fpv__vignette, .om-fpv__rail, .om-fpv__dots{display:none} .om-fpv__h{margin-top:var(--space-4)} .om-fpv__note{ margin:var(--space-4) 0 0;text-align:center;font-size:var(--text-micro); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted); } .om-fpv__cards{display:grid;gap:var(--space-16);margin-top:var(--space-16)} .om-fpv__card{ display:grid;grid-template-columns:1.15fr 1fr; gap:var(--space-12);align-items:center; } .om-fpv__card[data-side="right"] .om-fpv__still{order:2} .om-fpv__still{ /* `height:auto` is load-bearing: the width/height attributes are a presentational hint, and with both axes set `aspect-ratio` is ignored — the frame renders as a tall crop. */ width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block; border-radius:var(--radius-image);border:1px solid var(--border-hairline); } .om-fpv__idx{ display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-4); font-size:var(--text-micro);font-weight:var(--fw-semibold); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent); } .om-fpv__idx i{flex:0 0 28px;height:1px;background:var(--alpha-gold-40)} .om-fpv__idx span:last-child{color:var(--text-muted);font-weight:var(--fw-regular)} .om-fpv__title{ font-family:var(--font-display);font-size:var(--text-subsection); font-weight:var(--fw-regular);line-height:var(--lh-heading); letter-spacing:var(--ls-heading);color:var(--text-display);margin:0; } .om-fpv__desc{ margin:var(--space-4) 0 0;max-width:46ch; font-size:var(--text-body-size);line-height:var(--lh-body);color:var(--text-body); } .om-fpv__more{ display:inline-flex;align-items:center;gap:var(--space-2); margin-top:var(--space-6);padding:0;background:none;border:0;cursor:pointer; font-family:inherit;font-size:var(--text-micro);font-weight:var(--fw-semibold); letter-spacing:var(--ls-button);text-transform:uppercase;color:var(--accent); transition:color var(--dur-micro) var(--ease-silk); } .om-fpv__more:hover{color:var(--mustard-300)} .om-fpv__more .om-icon{width:14px;height:14px;transition:transform var(--dur-normal) var(--ease-silk)} .om-fpv__card.is-open .om-fpv__more .om-icon{transform:rotate(45deg)} .om-fpv__detail p{ margin:var(--space-4) 0 0;max-width:52ch; font-size:15px;line-height:var(--lh-body);color:var(--text-muted); } .om-fpv__detail p b{ display:block;margin-bottom:var(--space-1); font-size:var(--text-micro);font-weight:var(--fw-semibold); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-heading); } .om-fpv__cta{margin-top:var(--space-6)} /* The disclosure only exists in the live layout; statically it is all open. */ .om-fpv:not(.is-live) .om-fpv__more{display:none} /* --- live: sticky scroll flight ----------------------------------------- */ /* Scroll span of the flight. Seven stops share it by frame distance, so the felt speed is even; see the timeline note in js/fpv-tour.js. */ .om-fpv.is-live{--fpv-span:400vh} .om-fpv.is-live{position:relative;height:calc(100vh + var(--fpv-span));padding:0;background:#0B0B0C} .om-fpv.is-live .om-fpv__stage{ position:sticky;top:0;height:100vh;max-width:none;overflow:hidden;background:#0B0B0C; } .om-fpv.is-live .om-fpv__canvas{ display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0; } .om-fpv.is-live .om-fpv__still{display:none} /* Stage layering: frame (0) → scrims (1) → copy (2) → chrome (3). */ .om-fpv.is-live .om-fpv__scrim, .om-fpv.is-live .om-fpv__vignette{display:block;position:absolute;inset:0;pointer-events:none;z-index:1} .om-fpv.is-live .om-fpv__vignette{ background:radial-gradient(130% 95% at 50% 45%,rgba(9,11,15,0) 40%,rgba(9,11,15,.62) 100%); } /* Each scrim is driven by the card on that side, so the darkening follows the copy across the frame instead of sitting on the image the whole way. */ .om-fpv.is-live .om-fpv__scrim{opacity:0} .om-fpv.is-live .om-fpv__scrim--l{ background:linear-gradient(90deg,rgba(9,11,15,.90) 0%,rgba(9,11,15,.72) 30%,rgba(9,11,15,.20) 62%,rgba(9,11,15,0) 82%); } .om-fpv.is-live .om-fpv__scrim--r{ background:linear-gradient(270deg,rgba(9,11,15,.90) 0%,rgba(9,11,15,.72) 30%,rgba(9,11,15,.20) 62%,rgba(9,11,15,0) 82%); } /* Centred by the flex box, not by a transform — the script animates `transform` on this element, and a centring translate here would be overwritten by it on the first frame. */ .om-fpv.is-live .om-fpv__intro{ position:absolute;inset:0;z-index:2; display:flex;flex-direction:column;justify-content:center;align-items:center; padding:0 var(--space-12);text-align:center; will-change:opacity,transform; } .om-fpv.is-live .om-fpv__intro > *{max-width:min(760px,100%)} .om-fpv.is-live .om-fpv__intro .om-lede{margin-left:auto;margin-right:auto} .om-fpv.is-live .om-fpv__intro .om-label{justify-content:center} /* The flight opens on open sky, so the intro carries its own soft backing rather than relying on the side scrims, which are both off at this point. */ .om-fpv.is-live .om-fpv__intro::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(9,11,15,.64) 0%,rgba(9,11,15,.46) 38%, rgba(9,11,15,.42) 68%,rgba(9,11,15,.58) 100%); } .om-fpv.is-live .om-fpv__cards{ display:block;position:absolute;inset:0;margin:0; max-width:var(--width-content);margin-inline:auto; padding:0 var(--space-12);z-index:2;pointer-events:none; } .om-fpv.is-live .om-fpv__card{ position:absolute;display:block;width:min(430px,42vw); opacity:0;will-change:opacity,transform; text-shadow:0 1px 24px rgba(9,11,15,.55); } .om-fpv.is-live .om-fpv__card[data-side="left"]{left:var(--space-12)} .om-fpv.is-live .om-fpv__card[data-side="right"]{right:var(--space-12)} .om-fpv.is-live .om-fpv__card[data-pos="top"]{top:max(132px,19vh)} .om-fpv.is-live .om-fpv__card[data-pos="bottom"]{bottom:max(112px,15vh)} .om-fpv.is-live .om-fpv__card[data-side="right"] .om-fpv__desc{margin-left:auto} /* Collapsed by default in the live layout; the 0fr→1fr grid row is the one height transition that works without measuring the content. The clipping child carries no padding or border of its own — with box-sizing:border-box either one would hold the collapsed row open. Padding lives on the paragraphs, and the hairline is an inset shadow. */ .om-fpv.is-live .om-fpv__detail{ display:grid;grid-template-rows:0fr;margin-top:var(--space-4); opacity:0;visibility:hidden; transition:grid-template-rows var(--dur-normal) var(--ease-silk), opacity var(--dur-fast) var(--ease-silk), visibility 0s linear var(--dur-normal); } .om-fpv.is-live .om-fpv__detail > div{overflow:hidden;border-radius:var(--radius-card)} .om-fpv.is-live .om-fpv__card.is-open .om-fpv__detail{ grid-template-rows:1fr;opacity:1;visibility:visible;transition-delay:0s; } /* The long copy carries its own backing — the side scrim alone is not enough contrast for three paragraphs over a lit interior. */ .om-fpv.is-live .om-fpv__card.is-open .om-fpv__detail > div{ background:rgba(9,11,15,.72);backdrop-filter:var(--blur-glass); box-shadow:inset 0 0 0 1px var(--alpha-white-08); } .om-fpv.is-live .om-fpv__detail p{ padding:0 var(--space-6);max-width:none;color:var(--text-body); } .om-fpv.is-live .om-fpv__detail p:first-child{margin-top:0;padding-top:var(--space-6)} .om-fpv.is-live .om-fpv__detail p:last-child{padding-bottom:var(--space-6)} .om-fpv.is-live .om-fpv__cta{opacity:0;transition:opacity var(--dur-normal) var(--ease-silk)} .om-fpv.is-live .om-fpv__card.is-open .om-fpv__cta, .om-fpv.is-live .om-fpv__card:last-child .om-fpv__cta{opacity:1} /* --- chapter scrubber ---------------------------------------------------- */ .om-fpv.is-live .om-fpv__dots{ display:flex;gap:var(--space-3);align-items:center; position:absolute;left:50%;bottom:var(--space-6);transform:translateX(-50%); z-index:3;padding:var(--space-2) var(--space-4); background:rgba(9,11,15,.42);backdrop-filter:var(--blur-glass); border:1px solid var(--alpha-white-08);border-radius:var(--radius-pill); } .om-fpv__dot{ display:flex;align-items:center;gap:var(--space-2); padding:6px 2px;background:none;border:0;cursor:pointer;font-family:inherit; } .om-fpv__dot i{ display:block;width:22px;height:2px;border-radius:2px; background:var(--alpha-white-28); transition:background var(--dur-normal) var(--ease-silk),width var(--dur-normal) var(--ease-silk); } .om-fpv__dot:hover i{background:var(--alpha-white-55)} .om-fpv__dot.is-active i{width:34px;background:var(--accent)} .om-fpv__dot span{ max-width:0;overflow:hidden;white-space:nowrap;opacity:0; font-size:var(--text-micro);font-weight:var(--fw-semibold); letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-heading); transition:max-width var(--dur-normal) var(--ease-silk),opacity var(--dur-fast) var(--ease-silk); } .om-fpv__dot.is-active span, .om-fpv__dot:hover span, .om-fpv__dot:focus-visible span{max-width:180px;opacity:1} .om-fpv.is-live .om-fpv__rail{ display:block;position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--alpha-white-08);z-index:3; } .om-fpv__fill{ height:100%;background:var(--accent); transform:scaleX(0);transform-origin:0 50%; } /* --- tablet / mobile ----------------------------------------------------- */ @media (max-width:900px){ .om-fpv__card{grid-template-columns:1fr;gap:var(--space-6)} .om-fpv__card[data-side="right"] .om-fpv__still{order:0} /* No room for a side column over a cropped 16:9 frame — the card goes full width along the bottom, and the scrim becomes a bottom gradient. */ .om-fpv.is-live{--fpv-span:340vh} .om-fpv.is-live .om-fpv__cards{padding:0 var(--space-6)} .om-fpv.is-live .om-fpv__card{ width:auto;left:var(--space-6);right:var(--space-6); top:auto;bottom:calc(var(--space-16) + var(--space-6)); } .om-fpv.is-live .om-fpv__card[data-pos="top"], .om-fpv.is-live .om-fpv__card[data-pos="bottom"]{top:auto;bottom:calc(var(--space-16) + var(--space-6))} .om-fpv.is-live .om-fpv__scrim--l, .om-fpv.is-live .om-fpv__scrim--r{ background:linear-gradient(0deg,rgba(9,11,15,.92) 0%,rgba(9,11,15,.75) 34%,rgba(9,11,15,.18) 66%,rgba(9,11,15,0) 88%); } .om-fpv.is-live .om-fpv__desc, .om-fpv.is-live .om-fpv__card[data-side="right"] .om-fpv__desc{max-width:none;margin-left:0} .om-fpv.is-live .om-fpv__detail p{max-width:none} /* Bars only: the labels would wrap the scrubber at this width. */ .om-fpv__dot span{display:none} .om-fpv.is-live .om-fpv__dots{gap:var(--space-2)} } @media (max-width:520px){ .om-fpv{padding:var(--space-24) var(--space-6)} .om-fpv.is-live{--fpv-span:300vh} .om-fpv__dot i{width:14px} .om-fpv__dot.is-active i{width:22px} }