/* ============================================================================ PATRIMON — "One Animation" Fixed cinematic stage · chapters cross-fade on a single scroll timeline. THEME CUSTOMIZATION All brand colors, fonts and global spacing live in the :root block below. Change them here once — every page picks them up. (Animation settings live in assets/app.js → CONFIG at the top.) ========================================================================== */ :root{ /* -- colors ------------------------------------------------------------ */ --obsidian:#08080a; /* page background (near-black) */ --platinum:#E8E6E1; /* primary text */ --platinum-d:#9b9a95; /* secondary text */ --mute:#676663; /* muted/disabled text */ --silver:#8d8c87; /* tertiary accents */ --gold:#D4AF37; /* brand accent (links, em, cursor) */ --deeptech:#00E5FF; /* secondary accent (tech highlights) */ --line:rgba(232,230,225,.14); /* hairline borders */ /* -- layout & motion ---------------------------------------------------- */ --pad:clamp(20px,5vw,80px); /* global edge padding */ --maxw:1200px; /* content max-width on large screens */ --error:#c2603f; /* form validation accent */ --p4:cubic-bezier(.16,.84,.44,1); /* signature easing curve */ /* -- typography (loaded from Bunny Fonts in each page's ) --------- */ --serif:"Playfair Display",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; } /* ---- utility classes (no inline styles) ---- */ .mt-8{margin-top:8px}.mt-14{margin-top:14px}.mt-18{margin-top:18px}.mt-30{margin-top:30px}.mt-34{margin-top:34px} .mx-auto{margin-inline:auto} .link-gold{color:var(--gold)} .link-inherit{color:inherit} .text-dim{color:var(--platinum-d)} .text-mute{color:var(--mute)} .hero--short{min-height:42vh} .contact-mail{color:var(--gold);font-family:var(--serif);font-style:italic;font-size:1.4rem} .form-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap} /* per-page hero photographs — swap the image paths here */ .page-hero__bg--about{background-image:url(img/b_34141741.jpg)} .page-hero__bg--expertise{background-image:url(img/b_31375721.jpg)} .page-hero__bg--contact{background-image:url(img/b_19544004.jpg)} *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{background:var(--obsidian);color:var(--platinum);font-family:var(--sans);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden} body.lock{overflow:hidden} a{color:inherit;text-decoration:none} canvas{display:block} ::selection{background:var(--gold);color:var(--obsidian)} :focus-visible{outline:2px solid var(--platinum);outline-offset:3px;border-radius:4px} a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none} .spbar{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--platinum);opacity:.45;z-index:56;pointer-events:none} .skip{position:fixed;top:-60px;left:var(--pad);z-index:80;background:var(--platinum);color:var(--obsidian);padding:10px 16px;border-radius:6px;font-family:var(--mono);font-size:.72rem;transition:top .3s} .skip:focus{top:14px} .lenis.lenis-smooth{scroll-behavior:auto!important} .center{text-align:center} em{font-style:italic;color:var(--gold)} /* ---- CURSOR ---- */ .cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--gold);pointer-events:none;z-index:999; transform:translate(-50%,-50%);transition:width .35s var(--p4),height .35s var(--p4),background .35s,mix-blend-mode .1s} .cursor.is-hover{width:78px;height:78px;background:var(--platinum);mix-blend-mode:difference} @media(pointer:coarse){.cursor{display:none}} /* ---- PRELOADER ---- */ #preloader{position:fixed;inset:0;z-index:1000;background:var(--obsidian);display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad)} .pre__n{font-family:var(--serif);font-weight:500;font-size:clamp(5rem,22vw,18rem);line-height:.8;display:flex} .pre__n i{font-family:var(--mono);font-style:normal;font-size:1rem;color:var(--gold);margin-top:1.5em;margin-left:.3em} .pre__w{overflow:hidden}.pre__w span{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--platinum-d);padding-bottom:.4em} /* ---- FIXED STAGE ---- */ #stage{position:fixed;inset:0;z-index:1;overflow:hidden} #bg{position:absolute;inset:0;width:100%;height:100%;z-index:0} .nyc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;pointer-events:none; will-change:transform,filter;transform-origin:center 60%; background:linear-gradient(180deg,#0f1422 0%,#1c2740 40%,#2a3550 72%,#3a4564 100%)} .flash{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none} .vignette{position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(115% 92% at 50% 42%,rgba(8,8,10,.12) 20%,rgba(8,8,10,.82) 100%), linear-gradient(180deg,rgba(8,8,10,.45),rgba(8,8,10,.06) 42%,rgba(8,8,10,.66))} .noise{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .track{position:relative;z-index:0;height:1000vh} /* ---- top bar ---- */ .bar{position:absolute;inset:0 0 auto 0;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:24px var(--pad)} .brand{font-family:var(--mono);font-size:.8rem;letter-spacing:.22em;color:var(--platinum)} .brand i{color:var(--gold);font-style:normal;margin:0 .3em} .bar__r{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)} /* ---- chapters (overlays) ---- */ .chapter{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:0 var(--pad);opacity:0;will-change:opacity,filter} .chapter::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(1180px,94vw);height:min(660px,76vh);pointer-events:none;z-index:0; background:radial-gradient(ellipse at center,rgba(4,5,10,.62),rgba(4,5,10,.28) 45%,rgba(4,5,10,0) 72%)} .c-inner{max-width:1200px;width:100%;position:relative;z-index:1} .focus-stack{z-index:1} .ch-kicker{z-index:2} .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:34px} .xl{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.01em;font-size:clamp(2.6rem,7.4vw,8rem);text-wrap:balance} .sub{font-family:var(--sans);font-size:clamp(1.05rem,1.7vw,1.5rem);color:var(--platinum-d);margin-top:38px;max-width:46ch;margin-inline:auto;line-height:1.5} .md{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,4vw,3.6rem);line-height:1.26;letter-spacing:-.01em;max-width:24ch;text-wrap:balance} .lg{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,6.4vw,6rem);line-height:1.0;letter-spacing:-.02em;text-wrap:balance} .ch-kicker{position:absolute;top:14vh;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)} /* focus stacked cards */ .focus-stack{position:relative;width:100%;max-width:760px;height:60vh} .fcard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;text-align:center;align-items:center;opacity:0;will-change:opacity,transform} .fc-idx{font-family:var(--mono);font-size:.8rem;letter-spacing:.24em;color:var(--deeptech)} .fcard .lg{margin:18px 0 18px} .fc-grade{font-family:var(--mono);font-size:.9rem;letter-spacing:.06em;color:var(--gold);margin-bottom:22px} .fc-text{font-size:1.08rem;line-height:1.7;color:var(--platinum-d);max-width:48ch} /* contact */ .getintouch{position:relative;display:flex;align-items:center;justify-content:center;width:min(640px,82vw);height:min(640px,82vw); border:1px solid var(--line);border-radius:50%;overflow:hidden;isolation:isolate;margin-inline:auto} .gt-fill{position:absolute;left:var(--mx,50%);top:var(--my,50%);width:12px;height:12px;border-radius:50%;background:var(--gold); transform:translate(-50%,-50%) scale(0);transition:transform .75s var(--p4);z-index:0} .getintouch:hover .gt-fill{transform:translate(-50%,-50%) scale(220)} .gt-txt{position:relative;z-index:1;font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(2.6rem,8vw,6rem); line-height:1;letter-spacing:-.02em;transition:color .5s var(--p4)} .getintouch:hover .gt-txt{color:var(--obsidian)} .cta-line{display:inline-block;margin-top:30px;font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(1.3rem,2.6vw,2rem);color:var(--gold);border-bottom:1px solid transparent;transition:border-color .4s,letter-spacing .4s} .cta-line:hover{border-color:var(--gold);letter-spacing:.01em} .contact-data{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin-top:48px; font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--platinum-d)} .contact-data a:hover{color:var(--gold)} /* scroll cue + progress */ .scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:40px;display:flex;flex-direction:column;align-items:center;gap:12px; font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--platinum-d)} .scrollcue i{width:1px;height:50px;background:var(--line);position:relative;overflow:hidden} .scrollcue i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(-100%);animation:scr 2.4s var(--p4) infinite} @keyframes scr{0%{transform:translateY(-100%)}50%{transform:translateY(0)}100%{transform:translateY(100%)}} .progress{position:absolute;left:0;bottom:0;height:2px;width:100%;z-index:6;background:rgba(232,230,225,.08)} .progress i{display:block;height:100%;width:0;background:var(--gold)} .line-mask{overflow:hidden;display:block;padding-bottom:.06em;margin-bottom:-.06em} [data-hero]{opacity:0} /* ============================ SHARED MENU OVERLAY ============================ */ .menu-btn{padding:14px 10px;margin:-14px -10px;box-sizing:content-box;position:fixed;top:22px;right:var(--pad);z-index:60;width:34px;height:20px;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:7px;mix-blend-mode:difference} .menu-btn span{display:block;height:1.5px;width:100%;background:#fff;transition:transform .45s var(--p4),opacity .3s} .menu-btn.open span:nth-child(1){transform:translateY(4.25px) rotate(45deg)} .menu-btn.open span:nth-child(2){transform:translateY(-4.25px) rotate(-45deg)} .menu{position:fixed;inset:0;z-index:58;background:rgba(7,7,9,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);opacity:0;pointer-events:none;transition:opacity .55s var(--p4)} .menu.open{opacity:1;pointer-events:auto} .menu__inner{display:flex;flex-direction:column;gap:4px;max-width:var(--maxw);margin-inline:auto;width:100%} .menu__inner a{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,7.5vw,5.5rem);line-height:1.08;color:var(--platinum);display:flex;align-items:baseline;gap:22px;transition:color .4s,transform .5s var(--p4)} .menu__inner a .i{font-family:var(--mono);font-size:.78rem;color:var(--gold);letter-spacing:.1em} .menu__inner a:hover{color:var(--gold);transform:translateX(16px)} .menu__foot{max-width:var(--maxw);margin:clamp(34px,6vh,64px) auto 0;width:100%;display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--platinum-d);border-top:1px solid var(--line);padding-top:22px} .menu__foot a:hover{color:var(--gold)} .menu__legal{display:flex;gap:20px;margin-left:auto} body.menu-open{overflow:hidden} /* page transition curtain */ .pt{position:fixed;inset:0;z-index:70;background:var(--gold);transform:scaleY(0);transform-origin:bottom;pointer-events:none} .lmask{overflow:hidden;display:block;padding-bottom:.06em;margin-bottom:-.06em} /* ============================ SUBPAGE LAYOUT ============================ */ .pagenav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:24px var(--pad);transition:padding .4s var(--p4),background .4s,border-color .4s} .pagenav.shrink{padding:14px var(--pad);background:rgba(8,8,10,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .pagenav .brand{font-family:var(--mono);font-size:.8rem;letter-spacing:.22em;color:var(--platinum)} .pagenav .brand i{color:var(--gold);font-style:normal;margin:0 .3em} .pagenav .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)} .page-main{position:relative} .page-hero{min-height:64vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) clamp(40px,7vh,90px);max-width:var(--maxw);margin-inline:auto;width:100%} .page-hero .kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:22px} .page-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.8rem,8vw,7rem);line-height:1.0;letter-spacing:-.01em;text-wrap:balance} .page-hero .lead{font-size:clamp(1.05rem,1.6vw,1.4rem);color:var(--platinum-d);margin-top:28px;max-width:52ch;line-height:1.5} /* subpage hero visual layer: muted monochrome photo + fine line motif (no gold) */ .page-herowrap{position:relative;overflow:hidden} .page-herowrap .page-hero{position:relative;z-index:2;min-height:78vh} .page-hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center; filter:grayscale(.14) brightness(.96) contrast(1.02);transform:scale(1.04)} .page-hero__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,8,10,.1),rgba(8,8,10,0) 40%,rgba(8,8,10,.86)), linear-gradient(90deg,rgba(8,8,10,.55),rgba(8,8,10,0) 56%)} .page-hero__motif{position:absolute;inset:0;z-index:1;opacity:.28;mix-blend-mode:screen;pointer-events:none} .page-sec{max-width:var(--maxw);margin-inline:auto;width:100%;padding:clamp(50px,9vh,120px) var(--pad);border-top:1px solid var(--line)} .page-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:start} @media(max-width:860px){.page-grid{grid-template-columns:1fr;gap:22px}} .page-sec .kick{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)} .page-sec h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.05;letter-spacing:-.01em;text-wrap:balance;margin-top:8px} .page-sec h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 6px} .page-sec p{color:var(--platinum-d);font-size:1.05rem;line-height:1.75;max-width:64ch;margin-top:14px} .page-sec .grade{font-family:var(--mono);font-size:.84rem;letter-spacing:.06em;color:var(--gold);margin:4px 0 12px} .page-item{border-top:1px solid var(--line);padding-top:26px;margin-top:34px} .page-item:first-child{border-top:0;margin-top:0;padding-top:0} .page-foot{background:#0b0b0d;border-top:1px solid var(--line);padding:clamp(50px,8vh,90px) var(--pad)} .page-foot__in{max-width:var(--maxw);margin-inline:auto} .page-foot .big{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,6vw,4.5rem);line-height:1;color:var(--platinum)} .page-foot .big em{color:var(--gold);font-style:italic} .page-foot .cols{display:flex;flex-wrap:wrap;gap:30px 70px;margin-top:42px;padding-top:26px;border-top:1px solid var(--line);justify-content:space-between} .page-foot h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:12px} .page-foot a,.page-foot p{display:block;color:var(--platinum-d);font-size:.95rem;line-height:1.9} .page-foot a:hover{color:var(--gold)} .page-foot .legal-row{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--mute);display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between} .legal-doc h3{margin-top:28px} .legal-doc p{color:var(--platinum-d);max-width:74ch;line-height:1.75;font-size:.98rem;margin-top:8px} .legal-doc .muted{color:var(--mute);font-size:.8rem} [data-reveal]{opacity:0} .cform{display:grid;gap:22px;max-width:540px;margin-top:30px} .cfield label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:9px} .cfield input,.cfield textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:11px 0;color:var(--platinum);font-family:var(--sans);font-size:1.05rem;outline:none;transition:border-color .4s} .cfield textarea{resize:vertical;min-height:80px} .cfield input:focus,.cfield textarea:focus{border-color:var(--gold)} .cfield input:user-invalid,.cfield textarea:user-invalid{border-color:var(--error)} .cbtn{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:14px 28px;border-radius:100px;border:1px solid var(--gold);background:var(--gold);color:var(--obsidian);cursor:pointer;transition:background .4s,color .4s;justify-self:start} .cbtn:hover{background:transparent;color:var(--gold)} .cok{font-family:var(--mono);font-size:.78rem;color:var(--gold);display:none} .cform.sent .cok{display:block} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} #preloader{display:none}.cursor,.scrollcue i::after{display:none} .chapter{position:relative;opacity:1!important;min-height:100vh}[data-hero]{opacity:1} #stage{position:relative}.track{display:none}.focus-stack{height:auto}.fcard{position:relative;opacity:1!important;margin-bottom:40px} } /* chapter label spacing (was inline) */ .bar__r{margin-right:48px} /* keep page tag clear of the fixed menu button */ .pagenav .tag{margin-right:64px} /* ---- cinematic page: small screens (M2/M4 fixes) ---- */ @media(max-width:560px){ .ch-kicker{top:6vh;font-size:.56rem;letter-spacing:.18em;width:88vw;text-align:center;line-height:1.7} .c-inner{padding-top:13vh} .md{font-size:1.42rem;line-height:1.42;max-width:30ch} .lg{font-size:clamp(2rem,10.5vw,2.7rem)} .fc-text{font-size:.95rem;max-width:36ch} .contact-data{font-size:.74rem;line-height:2.1} .chapter::before{width:96vw;height:84vh; background:radial-gradient(ellipse at center,rgba(4,5,10,.78),rgba(4,5,10,.45) 45%,rgba(4,5,10,0) 75%)} } /* readability over bright parts of the globe (all sizes) */ .fc-text,.fc-grade,.md,.sub{text-shadow:0 2px 24px rgba(4,5,10,.85),0 0 8px rgba(4,5,10,.45)} /* ---- print: legal/privacy readable on paper ---- */ @media print{ body{background:#fff;color:#1b1b1f} .menu,.menu-btn,.pagenav,.page-foot,.spbar,.cursor,.pt{display:none!important} .legal-doc,.page-hero{color:#1b1b1f} .legal-doc .muted{color:#555} a{color:#1b1b1f;text-decoration:underline} }