/* ========================================================================== 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; } /* A weekend offers thirteen start times. As a single column that is a very long scroll next to a calendar that is only six rows tall, so the list wraps into however many columns fit. */ .om-slots__list{ display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px; align-content:start; } .om-slot{ display:flex;flex-direction:column;align-items:flex-start;gap:4px; padding:12px 14px;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:flex-start; 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; /* A short screen — a phone in landscape, or a small one with browser chrome — can leave the list taller than the drawer. `justify-content: center` would then push the first links above the top edge, where no amount of scrolling reaches them. The auto margins below centre the group only while there is room to spare and collapse to nothing when there is not, so every link stays reachable. */ overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; } .om-nav__links > :first-child{margin-top:auto} .om-nav__links > :last-child{margin-bottom:auto} .om-nav__links.is-open{transform:none} /* The drawer is 320px wide, so a strip of the page stays visible beside it — and on the hero that strip is a scroll-driven frame sequence that kept animating behind the open menu. This covers it and closes on tap. */ .om-nav__scrim{ position:fixed;inset:0;z-index:65; background:rgba(9,11,15,.72); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); } .om-nav__scrim[hidden]{display:none} /* The drawer lives inside

, and once the page is scrolled that header gains `backdrop-filter: blur(14px)`. A backdrop-filter creates a containing block for position:fixed descendants, so the drawer's top/bottom:0 stopped resolving against the viewport and resolved against the 76px-tall header — collapsing the drawer to header height and pushing most of the links out of it. Hence "the options disappear once you scroll". Suspending the blur while the drawer is open restores the viewport as the containing block. Nothing is lost visually: the scrim covers the header anyway for as long as this applies. */ html.om-locked .om-nav{-webkit-backdrop-filter:none;backdrop-filter: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} } /* Document scroll lock while the nav drawer is open. Applied to rather than so the current scroll position is preserved — position:fixed on the body would jump the page to the top, and the hero's frame sequence is driven by scroll position, so that jump would be very visible on return. */ html.om-locked{overflow:hidden} /* The scrim itself must still accept the tap that closes the menu. */ html.om-locked body{overscroll-behavior:none} /* --- Booking availability ------------------------------------------------ */ /* A day with nothing left. Struck through rather than merely dimmed, so it is not mistaken for the "past date" styling next to it. */ .om-cal__day.is-full{ opacity:.45;cursor:not-allowed;text-decoration:line-through; text-decoration-color:var(--accent); } /* Shown before a date is chosen, and when a date has nothing free. The hours are deliberately not listed until then. */ .om-slots__empty{ margin:0;padding:var(--space-6) 0; font-weight:var(--fw-light);font-size:14px;line-height:1.7; color:var(--alpha-white-55); }