/* ============================================================ OneLink — design tokens ============================================================ */ :root{ --ink: #0A0F0C; --ink-2: #0D1310; --panel: #101913; --panel-2: #142019; --gold: #C7A252; --gold-bright:#E4C77A; --copper: #A9673B; --cream: #F4EFE4; --cream-dim: #D9D2C2; --stone: #93A197; --stone-dim: #6C776E; --line: rgba(199,162,82,0.16); --line-soft: rgba(244,239,228,0.08); --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; --container: 1180px; --gutter: clamp(24px, 6vw, 64px); --ease: cubic-bezier(.22,.9,.32,1); --ease-out: cubic-bezier(.16,1,.3,1); --gold-grad: linear-gradient(135deg, #E9CF8A 0%, #C7A252 55%, #B08D3F 100%); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } body{ margin:0; background:var(--ink); color:var(--cream); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,p{ margin:0; } ::selection{ background:var(--gold); color:var(--ink); } /* page scrollbar, dressed for the room */ html{ scrollbar-width:thin; scrollbar-color:rgba(199,162,82,0.35) var(--ink); } body::-webkit-scrollbar{ width:10px; } body::-webkit-scrollbar-track{ background:var(--ink); } body::-webkit-scrollbar-thumb{ background:rgba(199,162,82,0.3); border-radius:8px; border:2px solid var(--ink); } body::-webkit-scrollbar-thumb:hover{ background:rgba(199,162,82,0.5); } :focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:2px; } /* ============================================================ Cinematic intro — two curtains carry ONE + LINK to the centre, hold, then part to reveal the site. Session-gated in . ============================================================ */ .intro{ display:none; } .intro-play{ overflow:hidden; } .intro-play .intro{ display:flex; position:fixed; inset:0; z-index:9000; } .intro-half{ flex:1 1 50%; display:flex; align-items:center; overflow:hidden; background:var(--ink); position:relative; } .intro-half--left{ justify-content:flex-end; } .intro-half--right{ justify-content:flex-start; } /* gold seam where the curtains meet */ .intro-half--left::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:1px; background:linear-gradient(to bottom, transparent, rgba(199,162,82,0.55) 50%, transparent); opacity:0; animation:introSeam 0.5s ease-out 0.95s forwards; } @keyframes introSeam{ to{ opacity:1; } } .intro-word{ font-family:var(--font-display); font-weight:340; font-size:clamp(44px, 13vw, 150px); line-height:1; letter-spacing:0.02em; background:linear-gradient(100deg, var(--gold-bright), var(--gold) 75%); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:0; will-change:transform, opacity; } .intro-play .intro-half--left .intro-word{ animation:introWordLeft 0.85s var(--ease-out) 0.15s forwards; } .intro-play .intro-half--right .intro-word{ animation:introWordRight 0.85s var(--ease-out) 0.15s forwards; } @keyframes introWordLeft{ from{ opacity:0; transform:translateX(-45vw); } to{ opacity:1; transform:translateX(0); } } @keyframes introWordRight{ from{ opacity:0; transform:translateX(45vw); } to{ opacity:1; transform:translateX(0); } } /* curtains part at 1.5s, carrying the words with them */ .intro-play .intro-half--left{ animation:introPartLeft 0.95s cubic-bezier(.76,0,.24,1) 1.5s forwards; } .intro-play .intro-half--right{ animation:introPartRight 0.95s cubic-bezier(.76,0,.24,1) 1.5s forwards; } @keyframes introPartLeft{ to{ transform:translateX(-100%); } } @keyframes introPartRight{ to{ transform:translateX(100%); } } /* whole overlay lets go at the end */ .intro-play .intro{ animation:introFade 0.35s ease-out 2.35s forwards; } @keyframes introFade{ to{ opacity:0; visibility:hidden; } } /* quiet vignette — depth without a colour wash */ .grain{ position:fixed; inset:0; pointer-events:none; z-index:2000; background:radial-gradient(ellipse 130% 90% at 50% 100%, rgba(0,0,0,0.3), transparent 60%); } .section-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); } .eyebrow{ font-family:var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; } .section-title{ font-family:var(--font-display); font-weight:440; font-size:clamp(30px, 4.4vw, 48px); line-height:1.14; color:var(--cream); letter-spacing:-0.01em; } .section-title em{ font-style:italic; font-weight:340; color:var(--gold-bright); } /* ============================================================ Reveal-on-scroll ============================================================ */ /* keyframes, not transitions — so entrance never fights hover states */ .reveal{ opacity:0; } .reveal.is-visible{ opacity:1; animation:revealIn 1.1s var(--ease-out) backwards; } @keyframes revealIn{ from{ opacity:0; transform:translateY(34px); filter:blur(6px); } } /* butter: siblings cascade in, one after another */ .cards .card:nth-child(2).is-visible, .work-grid .work-card:nth-child(2).is-visible, .work-grid .work-card:nth-child(5).is-visible{ animation-delay:0.12s; } .cards .card:nth-child(3).is-visible, .work-grid .work-card:nth-child(3).is-visible, .work-grid .work-card:nth-child(6).is-visible{ animation-delay:0.24s; } /* content must never be hostage to JavaScript */ .no-js .reveal{ opacity:1 !important; animation:none !important; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; } .reveal.is-visible{ animation:none; } } /* ============================================================ Buttons ============================================================ */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:700; font-size:14.5px; letter-spacing:0.02em; padding:14px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); white-space:nowrap; } .btn-solid{ background:var(--gold-grad); color:#1A1206; box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.35); position:relative; overflow:hidden; } /* champagne shine that sweeps across on hover */ .btn-solid::after{ content:""; position:absolute; top:0; bottom:0; left:-80%; width:55%; background:linear-gradient(105deg, transparent, rgba(255,255,255,0.38), transparent); transform:skewX(-18deg); transition:left 0.7s var(--ease-out); pointer-events:none; } .btn-solid:hover::after{ left:125%; } .btn-solid:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 16px 32px -12px rgba(199,162,82,0.55); } .btn-ghost{ background:transparent; color:var(--cream); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); } .btn-lg{ padding:17px 34px; font-size:15.5px; } .btn-pulse{ animation:breatheGlow 3.6s ease-in-out infinite; } @keyframes breatheGlow{ 0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 0 rgba(199,162,82,0); } 50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 0 22px 2px rgba(199,162,82,0.28); } } /* ============================================================ Nav ============================================================ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:22px 0; transition:padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease); border-bottom:1px solid transparent; } .nav.scrolled{ padding:14px 0; background:rgba(10,15,12,0.82); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line); } .nav-inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; gap:32px; } .brand{ display:inline-flex; align-items:center; gap:10px; margin-right:auto; color:var(--cream); } .brand-mark{ color:var(--gold); flex-shrink:0; } .brand-word{ font-family:var(--font-display); font-style:italic; font-weight:440; font-size:20px; letter-spacing:0.01em; } .nav-links{ display:flex; gap:34px; } .nav-links a{ font-size:14px; font-weight:600; color:var(--stone); transition:color 0.3s var(--ease); position:relative; } .nav-links a:hover{ color:var(--cream); } .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 0.35s var(--ease); } .nav-links a:hover::after{ transform:scaleX(1); } .nav-links a.active{ color:var(--gold-bright); } .nav-links a.active::after{ transform:scaleX(1); } .nav-cta{ padding:11px 22px; font-size:13.5px; } .menu-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0; } .menu-toggle span{ display:block; height:1.5px; width:100%; background:var(--cream); transition:transform 0.35s var(--ease), opacity 0.35s var(--ease); } .menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } .mobile-menu{ position:fixed; inset:0; z-index:999; background:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s; } .mobile-menu.open{ opacity:1; visibility:visible; transform:translateY(0); } .mobile-menu nav{ display:flex; flex-direction:column; align-items:center; gap:26px; } .mobile-menu nav a{ font-family:var(--font-display); font-style:italic; font-size:30px; color:var(--cream-dim); transition:color 0.3s var(--ease); } .mobile-menu nav a:hover{ color:var(--gold-bright); } /* ============================================================ Hero ============================================================ */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:140px var(--gutter) 100px; text-align:center; overflow:hidden; background:var(--ink); } .hero-lattice{ position:absolute; inset:0; opacity:0.22; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23C7A252' stroke-width='1'%3E%3Cpath d='M70 2 L138 70 L70 138 L2 70 Z' opacity='0.28'/%3E%3Ccircle cx='70' cy='70' r='1.6' fill='%23C7A252' stroke='none' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E"); background-size:140px 140px; -webkit-mask-image:radial-gradient(ellipse 50% 45% at 50% 32%, black 0%, transparent 72%); mask-image:radial-gradient(ellipse 50% 45% at 50% 32%, black 0%, transparent 72%); pointer-events:none; } /* slow-breathing candlelight behind the headline */ .hero-glow{ position:absolute; left:50%; top:34%; width:min(760px, 90vw); height:min(520px, 70vh); transform:translate(-50%,-50%); background:radial-gradient(ellipse at center, rgba(199,162,82,0.14) 0%, rgba(199,162,82,0.05) 45%, transparent 70%); filter:blur(30px); pointer-events:none; animation:heroGlow 7s ease-in-out infinite; } @keyframes heroGlow{ 0%,100%{ opacity:0.75; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); } } .hero-inner{ max-width:760px; display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; } .hero .eyebrow{ margin-bottom:26px; } .hero-title{ font-family:var(--font-display); font-weight:440; font-size:clamp(38px, 7.2vw, 76px); line-height:1.08; letter-spacing:-0.015em; color:var(--cream); } .hero-title em{ font-style:italic; font-weight:340; background:linear-gradient(100deg, var(--gold-bright), var(--gold) 75%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-sub{ margin:28px 0 40px; max-width:560px; font-size:clamp(15px, 1.6vw, 18px); line-height:1.7; color:var(--stone); } .scroll-cue{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2; } .scroll-cue span{ width:1px; height:44px; background:linear-gradient(to bottom, var(--gold), transparent); position:relative; overflow:hidden; } .scroll-cue span::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold-bright); animation:scrollDrip 2.4s var(--ease) infinite; } @keyframes scrollDrip{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(220%); } } .scroll-cue em{ font-style:normal; font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--stone); } /* ============================================================ About ============================================================ */ .about{ padding:140px 0; background:var(--ink); } .about-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px, 6vw, 90px); align-items:center; } .about-lead .section-title{ font-size:clamp(28px, 3.4vw, 42px); } .about-quote{ margin-top:38px; max-width:400px; font-family:var(--font-display); font-style:italic; font-weight:340; font-size:19px; line-height:1.6; color:var(--cream-dim); } .about-quote-rule{ display:block; width:56px; height:1px; margin-bottom:22px; background:linear-gradient(to right, var(--gold), transparent); } .about-body p{ color:var(--stone); font-size:16.5px; line-height:1.8; margin-bottom:20px; max-width:520px; } .about-points{ margin-top:34px; display:flex; flex-direction:column; gap:0; max-width:480px; } .about-points li{ padding:16px 0; border-top:1px solid var(--line-soft); font-family:var(--font-display); font-style:italic; font-size:18px; color:var(--cream-dim); } .about-points li:last-child{ border-bottom:1px solid var(--line-soft); } .about-points li span::before{ content:"—"; color:var(--gold); margin-right:12px; font-style:normal; } /* ============================================================ Services / packages ============================================================ */ .services{ padding:130px 0 150px; background:var(--panel); position:relative; } .section-head{ text-align:center; max-width:640px; margin:0 auto 76px; } .section-head .section-title{ text-align:center; } /* jewelled divider under centred section titles */ .section-head::after{ content:""; display:block; width:64px; height:9px; margin:26px auto 0; background: radial-gradient(circle 3.2px at 50% 50%, var(--gold) 98%, transparent), linear-gradient(to right, transparent, var(--line) 20%, var(--line) 80%, transparent) center / 100% 1px no-repeat; } .cards-wrap{ position:relative; } .link-line{ position:absolute; top:78px; left:0; right:0; width:100%; height:40px; overflow:visible; pointer-events:none; display:none; } .link-line line{ stroke:var(--gold); stroke-width:1; opacity:0.28; stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 1.6s var(--ease) 0.2s; } .cards-wrap.is-visible .link-line line{ stroke-dashoffset:0; } .cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; position:relative; } .card{ background:var(--panel-2); border:1px solid var(--line-soft); border-radius:14px; padding:40px 30px 34px; display:flex; flex-direction:column; transition:transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); position:relative; } .card:hover{ transform:translateY(-6px); border-color:var(--line); box-shadow:0 24px 50px -24px rgba(0,0,0,0.6); } .card-node{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--gold); margin-bottom:26px; background:var(--ink-2); position:relative; z-index:2; transition:border-color 0.4s var(--ease), color 0.4s var(--ease); } .card:hover .card-node{ border-color:var(--gold); color:var(--gold-bright); } .card h3{ font-family:var(--font-display); font-weight:500; font-size:23px; color:var(--cream); margin-bottom:14px; letter-spacing:-0.01em; } .card-teaser{ color:var(--stone); font-size:15px; line-height:1.6; margin-bottom:18px; } .card-link{ all:unset; display:inline-flex; align-items:center; gap:6px; cursor:pointer; box-sizing:border-box; font-family:var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:0.02em; color:var(--gold-bright); padding:9px 18px; border-radius:999px; border:1px solid var(--gold); margin-bottom:20px; transition:gap 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); } .card-link svg{ transition:transform 0.3s var(--ease); } .card-link:hover{ gap:9px; color:var(--gold-bright); background:rgba(199,162,82,0.1); border-color:var(--gold-bright); transform:translateY(-1px); } .card-link:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; } .card-benefit{ font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--gold-bright); line-height:1.5; padding-top:20px; margin-top:auto; border-top:1px solid var(--line-soft); } .card-benefit span{ display:block; font-family:var(--font-body); font-style:normal; font-weight:700; font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--stone); margin-bottom:8px; } /* typing-dots ambient animation on AI Agent icon */ .card:nth-child(3) .dot{ animation:typingDot 1.4s ease-in-out infinite; } .card:nth-child(3) .dot:nth-child(2){ animation-delay:0.18s; } .card:nth-child(3) .dot:nth-child(3){ animation-delay:0.36s; } @keyframes typingDot{ 0%,60%,100%{ opacity:0.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-2px); } } /* ============================================================ Work ============================================================ */ .work{ padding:130px 0; background:var(--ink); } .work-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } /* --- mockup card shell (a real